vue+element+upload上传图片+手动移除

< el-upload 
		 class="upload-demo" 
		 action="#" 
		 :on-success="handleAvatarSuccess" 
		 :on-preview="handlePreview" 
		 :before-remove="beforeRemove" 
		 multiple 
		 :before-upload="ZCbeforeUpload" 
		 :on-remove="handleRemove" 
		 :file-list="fileList">
		< el-button  size="small" type="primary">< i class="el-icon-upload" >< /i>上传文件</ el-button>
		//提示语。根据实际情况写
		 < div slot="tip" class="el-upload__tip" style="color:#8A898A">仅支持上传图片或PDF格式文件</ div>
	</ el-upload>

 **:before-upload="beforeUpload"** 
 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

**beforeUpload**(file) {
如果内容较大，加个loading比较好
      this.loading = true;
      let fd = new FormData();
      var that = this;
      fd.append("file", file); //传文件
      如果有其他参数就是这样继续写 fd.append("id", 5); //其他参数
      that.$http.post("/upload", fd).then(function (res) {
        if (res.data.code == "200") {
          that.loading = false;
          that.$message.success("上传成功");
          //将需要的存到数组。
          that.fileList.push({
	            name: res.data.newFileName,
	            filepath: res.data.fileName,
	            url: res.data.url,
	          });
        }
      });
      //这步我是用于回显。控制台会报错，不影响。但是不好看。（如果有更好的请指教）
  that.imageUrl = window.URL.createObjectURL(file.raw);
},

//移除   
//on-remove	文件列表移除文件时的钩子。我移除没有走接口。就得手动移除
//file-List  上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}].
（如果一个页面有多个上传。fileList不可以同名字。或者自己进行封装。）

  handleRemove(file, fileList) {
      this.$confirm(`确定移除 ${file.name}？`);
      // 去重，这块得把相同的url对比进行去除。要不然他是没有真正的删除。再次上传还是会出现之前删除的文件
      let fileIndex = this.fileList.findIndex((item) => item.url == file.url);
      this.fileList.splice(fileIndex, 1);
    },

这是vue+element+upload上传图片，手动移除掉的功能。请大家多指教。