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 自带的上传展示,删除等样式

例如: 选择两张图片上传


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 图片

推荐阅读更多精彩内容