需求年年有,今年特别多,要求:在新建成员的时候,会上传多个文件,这样后台只写一个接口,新建成员信息和文件 只走一个新建的接口
<el-upload class="upload-demo" action multiple :http-request="uploadFile" :on-preview="handlePreview" show-file-list :beforeUpload="beforeAvatarUpload" :on-change="handleChange" :auto-upload="false" ref="upload" > <i class="el-icon-circle-plus clickUpload"> <span>点击上传</span> </i> <div slot="tip" class="el-upload__tip lineHeight">上传用户文件,文件大小不超过5M</div> </el-upload>
<el-button type="primary" @click="onSubmit()">确定</el-button>
标红的是特别关键的,:auto-upload="false" 是让文件不立马走接口
// 文件预览 handlePreview(file) { console.log(file) }, handleChange(file) { const isLt2M = file.size / 1024 / 1024 < 5 if (!isLt2M) { this.$message({ message: '上传文件大小不能超过 5MB!', type: 'warning', }) this.$refs.upload.clearFiles() return false } }, // 文件上传 uploadFile(param) { this.fileData.append('file', param.file) }, // 确定 onSubmit() {
let form = {
name:1,
sex:'男',
age: '20',
like:'sing'
}
this.fileData = new FormData()
for (let key in form) {
this.fileData.append(key, form[key])
}
this.$refs.upload.submit() }