記錄一下用 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 回調(diào)的時候，處理圖片幔虏，把圖片轉(zhuǎn)換成 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)
}
這里我是把轉(zhuǎn)換后的 base64 圖片賦值給一個 變量纺念，存儲 圖片的 uid （uid 是 Element 隨機生成的，保存它有什么用想括，會在后面刪除時用到）和 圖片地址陷谱。
然后上傳服務端是把這個變量存儲的base64數(shù)組傳上去, 這樣我頁面就用 el-upload 自帶的上傳展示，刪除等樣式
例如： 選擇兩張圖片上傳
image.png
如果我要上傳前刪除其中一張瑟蜈，我就沒辦法刪除烟逊，因為我的圖片存在 beforeUploadImg 這個變量上渣窜，所以要在 on-remove 這個回調(diào)
async handlerRemoveImage(file, fileList) {
// id 存在表示已將上傳過得，需要做服務端刪除
if (file.id) {
} else {
// 根據(jù) uid 把待上傳的 base64 圖片多慮掉
this.beforeUpdateImg = this.beforeUpdateImg.filter((p) => p.uid !== file.uid)
}
}
點擊確定提交base64 圖片
