【elementui】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"
	   class="upload-file-uploader"
	   ref="upload"
	   :auto-upload="false"
	 >
	   <!-- 上传按钮 -->
	   <el-button size="mini" type="primary">选取文件</el-button>
	   <!-- 上传提示 -->
	 </el-upload>
	 <el-button @click="onSave">保存</el-button>
 </el-form>   
 <script>
export default {
    data() {
        return {
            upload: {
            	// 你的后端上传文件接口
                actionUrl: 'http://xxx.com/common/upload', 
                headers: {
                    Authorization: 'Bear xxx', // 认证信息
                }
            }
            fileList: [], // el-upload 的格式
            form: {
                // ... 表单其他字段
                dbFileList: [], // 接口文件格式
            },
        }
    },
    methods: {
        onSave() {
            // 1. 校验表单
            this.$refs['form'].validate(valid => {
                if(!valid) {
                    return
                }    
                // 2. 单独校验文件
                if(this.fileList.length === 0) {
                    this.$message.warn('请上传文件')
                    return
                }
                // 3. 调用 el-upload 文件上传函数
                this.$refs.upload.submit()
            })
        }
        // 添加文件时触发 change 事件
        handleChange(file, fileList) {
            // 这里赋值方便上面第 2 步的校验或其他逻辑校验。
            this.fileList = fileList
        },
        // 删除文件更新 FileList
        handleRemove(file, fileList) {
            this.fileList = fileList
        }
        // 每个文件上传成功后都会调用一次该函数
        handleUploadSuccess(file, fileList) {
            // 4. 每个文件做一次格式转换
            this.form.dbFileList.push({
                dbFileName: file.name,
                dbFileUrl: file.response.url
            })
            // 5. 判断所有文件的状态是否都是成功状态
            let allSuccess = fileList.every(file => 
            	file.status === 'success')
            if(allSuccess) {
                // 6. 所有文件上传成功才调用接口函数
                handleSave()
            }
        },
        async handleSave() {
           await doSave(this.form)
           this.$message.success('保存成功')
        }
    }

}
 </script> 

参考链接

el-upload 组件手动上传官方文档