<el-upload class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/" --随便写一个 用不到他
:on-change="handleChange"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:before-upload="onBeforeUploadImage">
<el-button style="margin-top: 40px;" size="small" type="primary">Upload Files</el-button>
<div slot="tip" class="el-upload__tip">Upload Document, No more than 3 files</div>
</el-upload>
onBeforeUploadImage(file, fileList) {
if(this.formData.length == 0){
this.formData = new FormData();
}
this.formData.append('file', file.file); --在每次upload文件的时候 将文件放到formData里
}
onSubmit() {
--这里在form提交时候 把其他要提交的元素也append到内容里一起提交到后端
this.formData.append('p_owner', 'Garry Wu');
this.formData.append('p_desc', this.form.p_desc);
this.formData.append('p_owner_site', this.form.p_owner_site);
this.formData.append('p_end_dt', this.form.p_end_dt);
this.formData.append('p_name', this.form.p_name);
this.formData.append('p_overview', this.form.p_overview);
this.formData.append('p_tag', this.dynamicTags);
this.formData.append('p_userid', '1');
let headers = {
headers: {
"Content-Type": "multipart/form-data"
}
}
this.$axios.post("uploadTalent/api", this.formData, headers)
.then((res) => {
if (res.data == 'uploaded') {
this.$message.success('Talent Uploaded!')
} else {
this.$message.error('Talent Upload Failed!')
}
})
.catch((err) => {
return err
});
},
用el-upload插件将多个文件传到后端，必须通过formData一个一个append进去 然后用multipart/form-data的header传到后端。
后端我用Django接收所有文件：
p_file_list = request.FILES.getlist("file", None)
由于是多个文件，必须用getlist接收！