解決uni-app在App端上傳圖片時路徑轉Base64的問題

haonanElva發表於2024-03-11
APP

解決uni-app在App端上傳圖片時路徑轉Base64的問題

在用uni-app開發專案的時候大家都會遇到這麼一個問題，
就是上傳圖片時在App上拿到的是檔案路徑，
然而後端要接收的卻是Base64字串，
這就尷尬了，在App端又無法呼叫Web Api（例如：Blob fileReader 等），
自己寫外掛的話又很麻煩，因此我找了很久才找到下面這個可以直接將Path轉為Base64的外掛。

image-tools

npm安裝

npm i image-tools --save

檔案內引入

import { pathToBase64, base64ToPath } from 'image-tools'

pathToBase64
從影像路徑轉換為base64，uni-app、微信小程式和5+APP使用的路徑不支援網路路徑，如果是網路路徑需要先使用下載API下載下來。

pathToBase64(path).then(base64 => {
    console.log(base64)
})
.catch(error => {
    console.error(error)
})

base64ToPath
將影像base64儲存為檔案，返回檔案路徑。

base64ToPath(base64).then(path => {
    console.log(path)
})
.catch(error => {
    console.error(error)
})

可以利用promise來序列和並行的執行多個任務

// 並行
Promise.all(paths.map(path => pathToBase64(path)))
  .then(res => {
    console.log(res)
    // [base64, base64...]
  })
  .catch(error => {
    console.error(error)
  })
// 序列
paths.reduce((promise, path) => promise.then(res => pathToBase64(path).then(base64 => (res.push(base64), res))), Promise.resolve([]))
  .then(res => {
    console.log(res)
    // [base64, base64...]
  })
  .catch(error => {
    console.error(error)
  })

外掛地址：https://www.npmjs.com/package/image-tools

相關文章