Element el-upload 图片传 base64

记录一下用 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 自带的上传展示，删除等样式

例如： 选择两张图片上传

如果我要上传前删除其中一张，我就没办法删除，因为我的图片存在 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 图片