记录一下用 el-upload 批量上传图片，传 base64 格式给服务端
公司的后台项目，需要传多张图片上去，以前上传接口是接收 base64 格式的，而 Element 是 file 格式。
首先把 action设置空，因为它是必传的，auto-upload 自动上传设置为 false
<el-form-item label="图片" prop="photos">
<el-upload
action="#"
list-type="picture-card"
:file-list="options.photos"
:on-change="onChangeUpload"
:auto-upload="false"
:on-remove="handlerRemoveImage"
:before-remove="handlerBeforeRemove"
:on-exceed="onUpdateExceed"
multiple
:limit="9"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
- 然后在 on-change 回调的时候，处理图片，把图片转换成 base64
onChangeUpload(file, fileList) {
const self = this
const reader = new FileReader()
reader.onload = function(e) {
self.beforeUpdateImg.push(
{
uid: file.uid,
photo: reader.result
}
)
}
reader.readAsDataURL(file.raw)
}
这里我是把转换后的 base64 图片赋值给一个 变量，存储 图片的 uid （uid 是 Element 随机生成的，保存它有什么用，会在后面删除时用到）和 图片地址。
然后上传服务端是把这个变量存储的base64数组传上去, 这样我页面就用 el-upload 自带的上传展示，删除等样式
例如： 选择两张图片上传
image.png
如果我要上传前删除其中一张，我就没办法删除，因为我的图片存在 beforeUploadImg 这个变量上，所以要在 on-remove 这个回调
async handlerRemoveImage(file, fileList) {
// id 存在表示已将上传过得，需要做服务端删除
if (file.id) {
} else {
// 根据 uid 把待上传的 base64 图片多虑掉
this.beforeUpdateImg = this.beforeUpdateImg.filter((p) => p.uid !== file.uid)
}
}
点击确定提交base64 图片
