在项目中遇到这样一个需求，上传图片时要满足批量选择、批量上传，点击上传按钮时统一上传；
话不多说，上代码！！！！
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)
},
至此，批量选择图片以及批量上传就基本结束啦～
这只是本人自己想到的一些方法，如果大家有更好的方法，欢迎在评论区沟通交流哦～
