el-upload上传文件

需求：选中或拖拽文件后，使用http-request属性实现自动上传，并根据后端传回来的结果显示错误和控制fileList的显示，如果后端返回成功，则文件显示在文件列表处，如果后端返回失败，则文件列表不显示这个文件并提示错误。

html源码：

<el-upload
	  class="upload-demo"
	  drag
	  action="#"
	  :http-request="uploadFile"
	  :file-list="fileList"
	  :on-error="uploadError"
	  ref="uploadArr"
	  :on-change="changeFile">
	  <i class="el-icon-upload"></i>
	  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

js源码：

changeFile(file){
	  this.fileList=JSON.parse(JSON.stringify(this.fileList));
	  this.newFile=file;
	  // this.fileList.push(fileList);
	  // console.log("changefileList",this.fileList);
},
uploadFile(file){
	  var formData = new FormData();
	  formData.append('file', file.file);
	  formData.append('versionType', parseInt(this.formdata.versionType));
	  this.$axios({
		    url: `/proxy_version/renew/uploadFile`,
		    method: 'post',
		    data:formData,
		    success: (result) => {
		      console.log("result",result);
		      if(result.data===''){
		        this.$message.error(result.msg);
		        console.log("uploadfileList",this.fileList);
		        // file.onError();
		      }else{
		        this.fileList.push(this.newFile);
		      }
		    }
	  });
}

问题一：上传的文件只传了uid给后端

解决方案：
可以使用formData来进行参数和文件的传递，FormData 会将文件自动转换成二进制流，并且将header中的Content-type编码类型被设为 “multipart/form-data”，这种编码方式被用作文件传输提高传输效率，不再需要自己设定。
如果不使用FormData ，手动设定Content-type编码类型，那么传输的文件将不是二进制，而是一个json的map集合，并且只存在uid。

也可以使用base64但是会增大工作量。

var formData = new FormData();
formData.append('file', file.file);
formData.append('versionType', parseInt(this.formdata.versionType));

....axios传输代码
//body参数
 data:formData,
 ....

问题二：fileList不会自动新增

在data中设置了fileList，并且:file-list="fileList"进行绑定，但是上传后fileList并没有新增文件。

1.设置on-change方法（未成功）

onchange方法可以得到新上传的file文件，我们可以通过push方式将文件加入fileList，以此来更新fileList，但是遇到问题。

changeFile(file){
	  this.fileList.push(file);
	  console.log("changefileList",this.fileList);
},

问题：在上传后会自动给fileList进行增加，但是如果这个文件符合前端所有的限制要求，则在文件列表处会显示该文件，并且是打勾的状态，可是后端返回报错，这个文件不可用，那么我们需要从文件列表处自动删除这个文件。
如果是在axios的success处进行删除this.fileList.splice(-1);，则针对从未上传过的文件，页面会出现文件出现后会马上消失，如果是已经上传过的，则会出现组件上下跳动一下。

2.解决方案

changeFile(fileList){
		// 使得界面中文件列表增加的效果消失
	  this.fileList=JSON.parse(JSON.stringify(this.fileList));
	  // 记录下新增加的文件
	  this.newFile=file;
},

最后根据后端的返回结果去修改fileList，从而达到效果。

success: (result) => {
   console.log("result",result);
   if(result.data===''){
     this.$message.error(result.msg);
     // file.onError();
   }else{
   // 界面中的文件列表会出现新上传的文件
     this.fileList.push(this.newFile);
   }
 }

注意：文件列表处显示的文件需要有name属性，才会显示文件名

3.拓展

1.

可以使用file.onError();去手动调用on-error绑定的方法。
file.onSuccess()等等

2.

// 可以清空已上传的文件
this.$refs.uploadArr.clearFiles();

clearFiles() 方法只会清空已上传的文件，而不会清空待上传的文件队列。如果需要同时清空待上传的文件队列，可以使用 clearQueue() 方法。