在项目中遇到这样一个需求，上传图片时要满足批量选择、批量上传，点击上传按钮时统一上传；

话不多说，上代码！！！！

1.首先是html部分：

<el-form>
  <el-form-item label="图片：" prop="imgUrl">
    <div style="display: flex;flex-wrap: wrap;">
      <div v-for="(item, index) in imgUrlList" :key="index" class="avatar-list">
        <img :src="item" class="avatar" />
        <el-button type="text" @click.stop="deleteImg(index)">删除</el-button>
       </div>
          <el-upload
            class="avatar-uploader"
            action=""
            ref="upload"
            :headers="headers" //这里的headers根据自己项目所需填写
            :show-file-list="false"
            accept="image/png,image/jpg,image/jpeg,image/gif"
            :on-change="handleTopImageSuccess"
            :limit="20" //图片限制个数
            :auto-upload="false"
            :http-request="imgRequest"
            :on-exceed="exceedHandle"
            multiple //批量选择的关键！！！
          >
            <i v-if="imgUrlList.length < 20" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </div>
        </el-form-item>
</el-form>

2.method部分：

    handleTopImageSuccess(res, file) {
      const reader = new FileReader() //首先要先定义一下读取文件
      reader.readAsDataURL(res.raw) // 这里要注意一下：readAsDataURL读取的是blob格式，直接用res会报错，res对象内的raw是我们需要的blob格式的文件
      // 因为文件读取是一个耗时操作， 所以它要在回调函数中，才能够拿到读取的结果
      reader.onload = () => {
        // reader.result就是转译过后的图片地址
        this.imgUrlList.push(reader.result)
      }
    },
    // 手动上传的关键步骤
    imgRequest(file) {
      console.log(file)
// formData数据格式需要append方法传入数据，file.file是传给后端的blob数据
// 注意：这里要定义一下imgFileList = new FormData()；否则会报错说append is not a function
      this.imgFileList.append('file', file.file)
    },
    // 选择图片数量大于限制之后的操作
    // 此处说明一下，如果选择的图片总数大于限制之后，fileList为空；需要根据自己项目需求来处理，大于限制的图片是否保留
    exceedHandle(files, fileList) {
      const val = this.limitNum - this.imgUrlList.length //先算出剩余可选择图片数量
      const len = val > files.length ? files.length : val // 判断当次选择图片的个数与剩余可上传的数量，如果超出剩余则只截取需要的个数，其他多余的不要；如果当次选择的数量小于剩余，则上传的数量为当次上传的个数；
      if (files.length + this.imgUrlList.length > this.limitNum) {
        this.$message.error(`最多上传${this.limitNum}张图片`)
      }
      for (let i = 0; i < len; i++) {
        this.handleTopImageSuccess(files[i], null)
      }
    },
    // 手动上传图片至后端
    async uploadImg() {
      this.$refs.upload.submit()
      const res = await uploadImages(this.imgFileList)
      if (res.respStatus.retCode === 200) {
        console.log('upload')
      }
    },
    deleteImg(index) {
      this.imgUrlList.splice(index, 1)
    },

至此，批量选择图片以及批量上传就基本结束啦～
这只是本人自己想到的一些方法，如果大家有更好的方法，欢迎在评论区沟通交流哦～