element上传多个图片

在element中给出的图片上传例子其实都是上传完后自动提交，博主在写的时候遇到了很多坑。

1、先说下element中图片上传的一些要点

1、想要实现多图片上传一定要标注multiple属性、而且一定要是自己手动实现上传功能、这里有两个方法：
（1）通过配置file-list,即获取file-list中上传的文件然后封装到FormData()中，最后调用axios传递formData数据到后台
（2）重写http-request="uploadFile"方法，重写了这个方法后调用’this.$refs.upload.submit()，就会自动调用你重写的http-request=""方法，它会根据你上传的图片个数循环调用多少次。如你上传了两张，调用’this.$refs.upload.submit()后内部会自动调用两次http-request=""方法。这样我们在http-request=""方法中设置this.fileList.append(‘file’, item.file)就能将文件封装进一个list中，然后再封装进formData。最后调用axios即可。
注意: 上面两种方法，使用方式是一样的，都是自己封装好一个FormData,然后调用axios，而且axios传递数据一定是data:yourData样式的，千万不要自讨苦吃这样写query:youData

2、element图片组件是默认上传的，添加属性auto-upload="false"后才能关闭。也只有关闭了自动提交后、才能实现手动提交

3、element图片组件自动上传如果没有手动封装FormData数据然后调用axios，即使添加了multiple属性可以上传多个,element图片组件只会是一个图片发送一个请求的，而并非是一个请求多个图片

4、调用this.$refs.upload.submit(),element图片组件会使用默认的上传方式上传文件 如果重写了http-reques方法，那么久会调用http-reques方法,默认上传和’this.$refs.upload.submit()'请求url都是element图片组件上绑定的action，只有自己调用axios才不会使用到这个action

5、如果想要一个请求上传多个图片并附带参数、只能使用formData.append("你的属性名"，属性值)的方式，使用formData.append("实体类名",this.form)是无法成功传数据的

6、关闭自动上传后调用this.$refs.upload.submit()才能生效，默认上传请求url都会是element图片组件上绑定的action，自动上传都是自己调用axios上传的

（1）

<el-upload accept="image/*" style="display: inline-block;"
	multiple 
	:file-list="fileList"
    :on-change="fileChange" 
    :on-remove="fileRemove" 
    :auto-upload="false" >
    
   <el-button type="primary" plain>
      <i class="el-icon-upload el-icon--right"></i>点击选择图片
   </el-button>
</el-upload>
<el-button type="success" plain @click="submitUpload">确认上传</el-button>

  //检测文件变动获取文件
  fileChange(file, fileList) {
    this.fileList = fileList;
  }
  //检测文件删除
  fileRemove(file, fileList) {
    this.fileList = fileList;
  }
  //手动上传图片
  submitUpload() {
    console.log("this.fileList", this.fileList)
    let formData = new FormData();  //  将文件封装进FormData
    this.fileList.forEach(file => {
      formData.append('file', file.raw)
    })
 	formData.append("属性名",“你想附带的数据”) //附带数据
    // 调用上传接口
    importFile(formData).then((res) => {
      //手动上传无法触发成功或失败的钩子函数，因此需要手动调用 
      this.upSuccess(res)
    }, (err) => {
      this.upError(err)
    })
  }

（2）

<el-upload accept="image/*" style="display: inline-block;"
	multiple 
	:file-list="fileList"
    :on-change="fileChange" 
    :on-remove="fileRemove" 
    :auto-upload="false" >
    
   <el-button type="primary" plain>
      <i class="el-icon-upload el-icon--right"></i>点击选择图片
   </el-button>
</el-upload>

  uploadFile(file) { 
	this.fileList.append('file', file.file)
  }
  // 上传图片
  submitUpload() {  
	 let formData = this.filedata
	 this.fileList = new FormData()  //  将文件封装进FormData
	 this.$refs.upload.submit()  // 依据图片个数循环调用uploadFile方法
	 fileList.append("属性名",“你想附带的数据”) //附带数据
	 //调用axios上传文件
	 importFile(this.fileList ).then((res) => { 
	 //手动上传无法触发成功或失败的钩子函数，因此需要手动调用 
	 this.updataSuccess(res.data) 
	 }
  }


	

2、参考博文

element多图片上传 https://www.jianshu.com/p/83a9e95dc54a?utm_campaign=haruki