element-ui upload 多文件单接口上传

最近在使用element-ui upload 上传多个文件的时候发现element-ui的批量上传是每个文件都请求一次接口,但是我们项目的需求是多个文件只请求一次接口.细思良久,经过一番奋战,终于实现了这个需求.
下面直接上代码

//element 组件
<el-upload
		action=""
		class="upload-demo"
		:on-change="change"
		multiple
		:http-request="uploadFile">
	<el-button size="small" type="primary">点击上传</el-button> 
</el-upload>

//data里面定义一个变量length记录选择文件的数量
data() {
			return { 
				length:0,
				fileList:[],//文件存储中间量
			}
		},

//上传文件用到的两个方法
uploadFile(content){
				let formData = new FormData();
				if(this.fileList.length>0){
					this.fileList.forEach(file=> {
						formData.append("files", file);
					});
					
					if(formData.getAll("files").length == this.length && this.length > 0){
						//	走接口
						console.log(formData.getAll("files"));
						let _url = "*****";//上传文件接口地址
						this.$axios({
							url: _url,
							method: 'post',
							data:formData, 
						}).then((res) => {
							this.fileList=[];
							//此处重置文件中间存储变量是为了相同文件能够重复传递
							if (true === res.data.ok){
								this.$message.success(`成功`);
							} else {
								this.$message.success(`失败`);
							}
						}, (err) =>{
							this.fileList=[];
							this.$message.success(`失败`);
						})
					}
				} 
			},
			change(){
				//判断上传文件数量
				this.length=document.querySelector("input[type=file]").files.length;
				if(this.length>0){
					Array.from(document.querySelector("input[type=file]").files).forEach(file=>{
						if(this.fileList.indexOf(file) == -1){
							this.fileList.push(file);
						}
					})
				}
				return false;
			},

需要注意的是我们这里使用的是FormData的格式向后台传文件组,后台定义的格式如图所示
https://img-blog.csdnimg.cn/20190627170140231.png
![后端定义的字段是files,你们自己可以灵活使用自己后台定义的字段]

作为前端的妹子,为大家贡献一篇我奋战好久才解决的问题,仅供大家参考.如果有不同意见和方法,可以互相交流学习