vue-element-admin的多文件上传（el-upload的坑）（完整代码）

el-upload多文件上传的解决办法，中间遇到了blob等奇奇怪怪的坑

1.配置一下el-upload

<el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false" 
    :file-list="imageList"
    :multiple=true
    name="multipartFiles"
    :on-success="uploadSuccess"
    :on-change="(file,fileList)=>changeHandler(file,fileList)"
    >

2.获取当前页面的filelist

changeHandler(file,fileList){//on-change绑定的方法
        console.log(file)
        console.log('fileList')
        console.log(fileList)
        this.fileList=fileList//最主要使用这个list
        console.log('输出imageList')
        console.log(this.imageList)
        // var multipartFiles=this.imageList
      },

uploadNotice(){
        console.log(this.imageList)
        // var multipartFiles=this.imageList

        let formData = new FormData(); //  用FormData存放上传文件
        
        this.fileList.forEach((val,index) => {//最重要就是这三行，解决bolb的关键
          formData.append("multipartFiles",val.raw)
        });
        
        console.log('formData')
        addNotice(formData).then(res=>{
          console.log('调用成功')
          console.log(res)
        })

      },

中间出现的坑

第一个坑

Failed to execute ‘append’ on ‘FormData’: parameter 2 is not of type ‘Blob’.

说我append方法中间那个文件不是blob类型的，除了把他转换掉，那唯一的问题就是，我传的参数是不是错了，为什么那个链接我都可以访问，他却说我不是blob的类型，答案确实就是我传错了参数，如果是下面这样子写就会有blob那个东西的报错。

        //错误1
        this.fileList.forEach(file => {
          formData.append('file',file.raw,'multipartFiles')
        });

		//错误2
        for(var i=0;i<this.fileList.length;i++){
          formData.append("multipartFiles",this.fileList[i])
        }

完整代码（有些代码没用请自行删除）

<template>
  <div>
    <el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false" 
    :file-list="imageList"
    :multiple=true
    name="multipartFiles"
    :on-success="uploadSuccess"
    :on-change="(file,fileList)=>changeHandler(file,fileList)"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span> -->
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-button @click="uploadNotice">点击上传</el-button>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  </div>
</template>

<script>
import { addNotice } from '@/api/notice'
import axios from 'axios'
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        photoUrl:[],
        imageUrl:'',
        imageList:[],
        fileList:[]
      };
    },
    created(){
      this.imageList=[]
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      uploadNotice(){
        console.log(this.imageList)
        // var multipartFiles=this.imageList

        let formData = new FormData(); //  用FormData存放上传文件
        this.fileList.forEach((val,index) => {
          formData.append("multipartFiles",val.raw)
        });
        
        console.log('formData')
        addNotice(formData).then(res=>{
          console.log('调用成功')
          console.log(res)
        })
        
      addList(res){
        console.log(res)
        // this.photoUrl.pull(res)
      },
      uploadSuccess(response, file, fileList){
        console.log(response)
        console.log(file)
        console.log(fileList)
      },
      changeHandler(file,fileList){
        console.log(file)
        console.log('fileList')
        console.log(fileList)
        this.fileList=fileList
        this.imageList.push(file.url)
        console.log('输出imageList')
        console.log(this.imageList)
        // var multipartFiles=this.imageList
      },
      
    }
  }
</script>

export function addNotice(data) {
    return request({
        url: '后端接口',
        method: 'post',
        data:data,
        headers:{
            "Content-Type": "multipart/form-data"
        }
    })
}