【elementui】el-upload 自定义且一次性上传多个文件

原创

已于 2022-03-24 22:03:22 修改 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #el-upload #自定义上传 #多文件上传

于 2022-03-24 22:03:01 首次发布

本文介绍如何使用El-upload组件实现表单中的文件上传，包括校验文件、格式转换和接口调用策略。重点在于确保所有文件上传成功后再进行下一步操作。

业务需求

填写表单字段
手动选择文件
点击保存上传文件并保存表单

思路

校验表单
校验已选择文件
触发 el-upload 文件上传函数
每个文件做一次格式转换（如果格式一致可忽略）
判断所有文件的状态是否都是成功状态
所有文件上传成功才调用接口

<el-form ref="form" :model="form">
    <el-form-item>
    <!--其他表单字段-->
        <el-input> 
    </el-form-item>
	<el-upload
	   :action="upload.actionUrl"
	   :file-list="fileList"
	   :on-success="handleUploadSuccess"
	   :on-change="handleChange"
	   :show-file-list="true"
	   :headers="upload.headers"