快捷導航

Element plus實現(xiàn)圖片手動上傳與回顯的過程

更新時間：2024年09月22日 08:53:50 作者：哪里的破水瓶

近期,發(fā)現(xiàn)點擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下

1. 圖片手動上傳，等待上傳成功。

這里關(guān)鍵點設(shè)置關(guān)閉自動上傳，用于手動提交，設(shè)置上傳地址和請求頭信息。success函數(shù)和error函數(shù)監(jiān)聽結(jié)果。

:auto-upload="false"：禁止自動上傳
:action=uploadUrl 設(shè)置上傳地址
:headers="headers" 設(shè)置上傳請求頭信息
:file-list="form.files" 將自定義對象加入到列表中
:on-success="handleAvatarSuccess"：上傳成功函數(shù)
:on-error="handleError"：上傳失敗函數(shù)

<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"
  >

邏輯實現(xiàn)，因為后端返回的是一個圖片地址，這里新增的時候需要拿到圖片上傳結(jié)果，并復(fù)制給對象，進行新增，當點擊提交表單后：調(diào)用submitUpload 自定義函數(shù)。作用是等待上傳結(jié)果。

try {
    await this.submitUpload()
} catch (e) {
    this.$message.warning('請重新上傳圖片~~')
return
}

這里通過 Promise 實現(xiàn)等待效果。通過 this.$refs.upload.submit() 方法進行上傳圖片。

this.uploadPromiseResolve 和 this.uploadPromiseReject 是自定義參數(shù)，獲取到當前Promise 的 resolve, reject 引用，從而實現(xiàn)等待，如果沒有這兩個，該函數(shù)將不會等待。當值有引用時，該對象不會被釋放，從而等待。

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

這個時候成功上傳函數(shù)或者失敗函數(shù)會被調(diào)用，成功則把圖片地址復(fù)制給當前表單，然后將響應(yīng)結(jié)果賦值并釋放，一定要釋放。失敗則直接釋放。

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

回到剛剛的函數(shù)中。整個流程就到完成了。

2. 回顯是如何實現(xiàn)的？

需求是點擊修改，將獲取接口中的圖片地址路徑，進行渲染該圖片。

通過 getDevice 獲取到當前設(shè)備信息，有 img 屬性表示圖片。

接下來，調(diào)用 getImgForObject 函數(shù)，傳入圖片，多張圖片由逗號分隔?？聪戮唧w實現(xiàn)。

/** 修改按鈕操作 */
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 = '修改設(shè)備'
  this.open = true
}

這里說下邏輯，通過獲取的路徑，去調(diào)用該接口，獲取二進制數(shù)據(jù)，將二進制轉(zhuǎn)換成 blob對象，再使用 URL.createObjectURL() 創(chuàng)建當前頁面可訪問的圖片地址。為什么是當前頁面可訪問呢，因為這個是臨時地址，只能被當前會話訪問。最后封裝ELement ui 需要的格式對象返回即可。

// 將二進制數(shù)據(jù)轉(zhuǎn)換成可訪問的Element ui 對象
export async function getImgForObject(imgs) {
    if (imgs) {
        return await Promise.all(
            imgs.split(',').map(async item => {
                const blob = await getImg(item)
                // 將 Blob 對象轉(zhuǎn)換為 File 對象
                const split = item.split('/')
                const file = new File([blob], split[split.length - 1], {type: blob.type})
                // 創(chuàng)建唯一的 uid (可以根據(jù)實際需求生成唯一標識)
                const uid = Date.now()
                // 使用 URL.createObjectURL() 創(chuàng)建可訪問的本地 url
                const fileUrl = URL.createObjectURL(blob)
                // 構(gòu)建 File 對象并返回
                return {
                    name: file.name,
                    percentage: 0,            // 初始上傳進度為 0
                    raw: file,  // Blob 轉(zhuǎn)換為 File
                    size: file.size,          // 文件大小
                    status: 'ready',          // 狀態(tài)設(shè)為 ready
                    uid: uid,                 // 唯一標識符
                    url: fileUrl              // 使用 createObjectURL 生成的本地 URL
                };
            })
        )
    }
}

到此這篇關(guān)于Element plus實現(xiàn)圖片手動上傳與回顯的過程的文章就介紹到這了,更多相關(guān)Element plus圖片上傳與回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: