el-upload前端实现多文件上传功能示例
作者：Sample_浅浅未央
在Vue.js中可以使用Element UI库中的<el-upload>组件来实现多文件上传的功能,这篇文章主要给大家介绍了关于el-upload前端实现多文件上传功能的相关资料,需要的朋友可以参考下
template中：
<el-upload
class="upload-demo"
ref="fileUpload1"
:file-list="fileList1"
action=""
:on-exceed="handleExceed1"
:http-request="httpRequest1"
:on-remove="handleRemove1"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>script中：
data：
formdata1: new FormData(), //创建FormData1对象
methods：
methods: {
handleExceed1(file, fileList) {
//上传的过程中触发的函数
},
httpRequest1(file) {
//上传完毕触发的函数
this.formdata1.append("new_files", file.file);
},
handleRemove1(file, fileList) {
/**
* 检测删除的file是否是新加入的file文件 如果不是，删除就给与md5的值
*/
if ((file.raw != undefined && file.raw instanceof File) == false) {
this.deleteFiles1 += file.md5 + ",";
}
},
},提交的时候：
this.formdata1 = new FormData(); //创建FormData对象
this.formdata1.append("fault_no", this.$route.query.fault_no);
this.formdata1.append("progress", "1");
this.formdata1.append("step", n);
this.formdata1.append("files_to_delete", this.deleteFiles1);//删除的文件的id值
this.$refs.fileUpload1.submit();//用来提交文件上传的file格式文件组
updateFaultFile(this.formdata1).then((res) => {
if (res.resCode === 20000) {
this.$message.success("更新成功");
} else {
this.$message.error("更新失败");
}
});如果仅仅是单文件上传的话：直接在提交的时候传入
this.formdata1.append("new_files", this.fileList[0]);就可以了
总结
到此这篇关于el-upload前端实现多文件上传功能的文章就介绍到这了,更多相关el-upload前端多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！