el-upload前端实现多文件上传功能示例
更新时间:2024年07月22日 08:31:48 作者: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前端多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程
在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块,这篇文章主要介绍了Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程,需要的朋友可以参考下2024-01-01
echarts.js 动态生成多个图表 使用vue封装组件操作
这篇文章主要介绍了echarts.js 动态生成多个图表 使用vue封装组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
uniapp + Vue3项目中安装和使用uView Plus的完整配置指南
文章主要介绍了如何解决在uni-app+Vue3项目中使用uViewPlus时遇到的问题,包括项目初始化、核心配置、故障排除方案以及常见问题诊断2025-12-12
vue element-ui el-cascader级联选择器数据回显的两种实现方法
这篇文章主要介绍了vue element-ui el-cascader级联选择器数据回显的两种实现方法,具有很好的参考价值,希望对大家有所帮助。2023-07-07


最新评论