其他分享
首页 > 其他分享> > el-upload将多个文件传送到后端,django接收

el-upload将多个文件传送到后端,django接收

作者:互联网

<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
					});
			},
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

用el-upload插件将多个文件传到后端,必须通过formData一个一个append进去 然后用multipart/form-data的header传到后端。

 

后端我用Django接收所有文件:

p_file_list = request.FILES.getlist("file", None)

由于是多个文件,必须用getlist接收!

alexwzj 发布了2 篇原创文章 · 获赞 0 · 访问量 112 私信 关注

标签:el,form,formData,upload,Upload,文件传送,file,append
来源: https://blog.csdn.net/u013255176/article/details/104543159