Element plus实现图片手动上传与回显的过程

<el-upload
      ref="upload"
      :auto-upload="false"
      :action=uploadUrl
      :headers="headers"
      :file-list="form.files"
      name="file"
      list-type="picture-card"
      :on-progress='handPic'
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :on-error="handleError"
  >

try {
    await this.submitUpload()
} catch (e) {
    this.$message.warning('请重新上传图片~~')
return
}

// 包装 submit 方法，返回 Promise
async submitUpload() {
  return new Promise((resolve, reject) => {
    this.$refs.upload.submit()
    this.uploadPromiseResolve = resolve
    this.uploadPromiseReject = reject
  })
},

//图片上传成功
handleAvatarSuccess(response) {
  this.form.img = response.fileName
  this.uploadPromiseResolve(response)
  this.uploadPromiseResolve = null
},
handleError(error) {
  this.uploadPromiseReject(error)
  this.uploadPromiseReject = null
}

/** 修改按钮操作 */
async handleUpdate(row) {
  this.reset()
  const id = row.deviceNumber || this.ids
  const {data} = await getDevice(id, this.form.deviceType)
  this.form = data
  this.form.files = await getImgForObject(data.img)
  this.title = '修改设备'
  this.open = true
}

// 将二进制数据转换成可访问的Element ui 对象
export async function getImgForObject(imgs) {
    if (imgs) {
        return await Promise.all(
            imgs.split(',').map(async item => {
                const blob = await getImg(item)
                // 将 Blob 对象转换为 File 对象
                const split = item.split('/')
                const file = new File([blob], split[split.length - 1], {type: blob.type})
                // 创建唯一的 uid (可以根据实际需求生成唯一标识)
                const uid = Date.now()
                // 使用 URL.createObjectURL() 创建可访问的本地 url
                const fileUrl = URL.createObjectURL(blob)
                // 构建 File 对象并返回
                return {
                    name: file.name,
                    percentage: 0,            // 初始上传进度为 0
                    raw: file,  // Blob 转换为 File
                    size: file.size,          // 文件大小
                    status: 'ready',          // 状态设为 ready
                    uid: uid,                 // 唯一标识符
                    url: fileUrl              // 使用 createObjectURL 生成的本地 URL
                };
            })
        )
    }
}