Element UI + Vue 批量上传图片（只请求一次）

在使用elementui上传组件时，可以一次选择多个文件上传，设置:multiple="true"可以选择多个文件，但是文件请求的时候还是分开请求，多少个图片请求多少次。

现在需求时一次请求上传所有选中的图片

主要步骤：（1）通过elementui组件选取需要上传图片（2）封装上传函数

代码：

hmtl部分：

<!-- 上传图片 -->
      <el-dialog title="选择上传图片" :visible.sync="dialogVisible_up_image" width="30%">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="" 	<!-- 因为是自定义的上传方式，此处可以不填 --> 
          :multiple="true"       <!-- 可以选择多个文件 -->       
          :auto-upload="false"   <!-- 取消自动上传，手动点击时才上传图片 -->      
          :before-upload="beforeAvatarUploadImage" <!-- 上传之前判断图片格式 -->
          :file-list="fileList"  <!-- 上传图片列表 -->     
          :limit="6"             <!-- 最大同时上传数量 -->       
          :on-change="handleChange"<!-- 图片状态改变时，添加图片到自定义列表中（定义的：fileList） -->  
          list-type="picture"    <!-- 文件列表类型，这里上传的是图片，可以改成对应上传格式 -->        
        >
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="primary"
            @click="uploadForm" <!-- 自定义的上传函数（核心） -->   
          >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传png、jpg格式的图片</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_up_image = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible_up_image = false">确 定</el-button>
        </span>
      </el-dialog>

js部分

    // 判断图片格式
    beforeAvatarUploadImage(file) {
      const isJpeg = file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpeg) {
        this.$message.error('请选择正确的文件格式上传')
      }
      return isJpeg
    },
    // 选择文件时，往fileList里添加
    handleChange(fileList) {
      this.fileList.push(fileList)
    },
    // 批量上传
    uploadForm() {
      // this.$refs.upload.submit()
      if (this.fileList.length === 0) {
        this.$message.warning('请选取文件')
        return
      }
      const formData = new FormData()
      // 因为要传一个文件数组过去，所以要循环append
      this.fileList.forEach(file => {
        formData.append('files', file.raw)
      })
      formData.append('userId', this.userId) // 自定义参数
      this.$axios.post('http://117.78.49.148:8088/medical-care/common/uploadFile/FullPaths', formData).then(res => {
        this.$message.success('图片上传成功！')
        setTimeout(() => {
          this.dialogVisible_up_image = false
        }, 500)
      }).catch(res => {
        this.$message.success('图片上传失败！')
        setTimeout(() => {
          this.dialogVisible_up_image = false
        }, 500)
      })
      // 清空图片列表（一定要清空，否则上传成功后还是会调用handleChange（）函数，上传成功后列表中还存在图片）
      this.fileList = []
    }

结果所示