这篇文章主要为大家详细介绍了某视频剪辑软件实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文件上传的具体代码，供大家参考，具体内容如下
记录问题，方便回顾
1、使用elementUI的埃尔-上传插件进行上传。 2、使用投入。
1、使用elementUI的 el-upload插件进行上传。
html:
埃尔-上传
ref='头像上传者'
' class='头像上传者'
:show-file-list='false '
：自动上传='假'
行为
:on-change='handleChange '
img v-if=' addsubmenudata。' imageurl ':src=' addsubmenudata。imageurl ' class=' avatar '
I v-else class=' El-icon-plus avatar-uploader-icon '/I
/El-上传
js:
data() {
返回{
AddSubmenuData:{
id:' '，
pid:' '，
funType:1，
名称：'',
排序：'',
系统编码："",
备注：'',
图像Url:" "
},
};
},
方法：{
//获取图片信息并转成base64
handleChange(文件，文件列表){
let reader=new FileReader()；
让文件结果=" "；
读者。readasdataurl(文件。raw)；
reader.onload=function() {
文件结果=阅读器.结果
};
reader.onloadend=function() {
这个addsubmenudata。imageurl=文件结果
};
}
}
css:
/深/。头像上传者100 . El-上传{
边框：1px虚线# d9d9d9
边框-半径：6px
光标：指针；
位置：相对；
溢出：隐藏；
左边距：80px
边距-底部：22px
}。头像上传者100 . El-上传：悬停{
边框颜色：# 409EFF
}。头像-上传者-图标{
字体大小：28px
颜色：# 8c939d
宽度：178像素
身高：178像素
行高：178像素
文本对齐：居中；
}。头像{
宽度：178像素
身高：178像素
显示：块；
}
效果图：
2、使用input进行上传。
1)、html
首先投入的类型属性要改成文件，如果需求是点击按钮在上传文件。可以给投入加一个ref="fileInput "，然后通过点击按钮调用投入的事件：@click='$refs.fileInput.click()' .
div class=' El-button-primary El-button ' @ click=' $ refs。文件输入。单击()'
input type=' file ' ref=' file input ' accept=' * ' @ change=' getFile ' style=' display:none '
img src='././资产/基础设施/xz。巴布亚新几内亚'/添加
/div
2)、js
获取文件后就可以进行数据处理并调用接口。因为有些时候，上传文件有些是重复的，再次调用方法就是失效，所以，可以在每次上传完之后清除之前上传的文件，这样即使文件相同，也可以重复调用方法这个. refs $ file input . value=' '
//获取文件数据
获取文件(事件){
//这就是你上传的文件
事件.目标.文件[0]
let form file=new FormData()；
formFile.append('file '，event。目标。文件[0])；
formFile.append('apply_info_id '，this .rnd num(12))；
formFile.append('file_type '，' ')；
//调用接口
文件_上传(表单文件)。然后(res={
这个。附加信息。addpouptabledata。数据。push({ name:RES . data。name，id:res.data.id，size:(event.target.files[0]).尺寸/1024)。到固定(0)“kb”，路径：res.data.path})
//调用接口后清除文件
这个. refs $ file input . value=' '
})
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。