elementui上传多张图片（可多选）

上传多张（可多选）

vue页面：

 <div>上传多张</div>
    <br />
    <el-upload
      :action="uploadUrl"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple   //多选
      :limit="3"  //限制了只能3三图片
      :on-exceed="handleExceed"   //文件超出个数限制时的钩子
      :file-list="fileList"   
      :before-upload="beforeUp"  //上传文件之前的钩子最常用的，用来控制文件上传前的格式，或者文件大小等属性的校验，也可以进行文件的上传
      list-type="picture-card"
    >
    <i class="el-icon-plus"></i>
</el-upload>

data里面：

 data() {
    return {
      fileList: [],
      uploadUrl: "",//上传文件的接口地址
      imageUrl: "",
    };
  },

methods里面：

 //限制上传文件的个数提示
handleExceed(files, fileList) {
   this.$message.warning(
     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
      files.length + fileList.length
   } 个文件`);
},
//删除之前执行的方法
beforeRemove(file, fileList) {
   return this.$confirm(`确定移除 ${file.name}？`);
},
 
 //文件删除的方法
 handleRemove(file, fileList) {
   //此处elementui会自动去掉删除的图片，fileList数组会自动清楚删除的图片的地址
   //所以fileList就是删除成功之后的数组，不需要在进行任何处理
   console.log(file, fileList);
   this.fileList = fileList;
},
    
 /* 上传 */
beforeUp(file) {
	var formData = new FormData();
    formData.append("file", file);  //file是上传的文件
    //调用上传接口xxxxx接口地址
    this.$http.post("xxxxx", formData).then((res) => {
      console.log(res);//可获取上传成功返回的地址（图片地址）
      //yyyyy保存接口
      return this.$http.post("yyyyy", {
        ImageUrl: res.data,
      });
    });
 },