需求年年有,今年特别多,要求:在新建成员的时候,会上传多个文件,这样后台只写一个接口,新建成员信息和文件 只走一个新建的接口
<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()
}