vue实现文件上传前端,vue实现文件上传到服务器
这篇文章主要为大家详细介绍了某视频剪辑软件实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文件上传的具体代码，供大家参考，具体内容如下
记录问题，方便回顾
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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。