这篇文章主要为大家详细介绍了某视频剪辑软件实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文件上传的具体代码,供大家参考,具体内容如下
记录问题,方便回顾
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=
})
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。