业务需求

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

思路

• 校验表单
• 校验已选择文件
• 触发 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 组件手动上传官方文档

最后

以上就是敏感果汁为你收集整理的【elementui】el-upload 自定义且一次性上传多个文件业务需求思路参考链接的全部内容，希望文章能够帮你解决【elementui】el-upload 自定义且一次性上传多个文件业务需求思路参考链接所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。