將 Base64 圖像文件 URI 轉換為文件 Object

Question

我必須將File object 作為有效負載發送到后端 API。 如何將 Base64 圖像文件 URI 轉換為文件 object 格式，如下所述？ 我試圖尋找其他解決方案，但那些是 Blob 到文件轉換或 base64 數據 url 轉換。 有人可以幫忙嗎？

Base64 圖像文件 URL

data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg

這需要轉換為

文件 Object

File {
   lastModified: 1582829787565
   lastModifiedDate: Thu Feb 27 2020 10:56:27 GMT-0800 (Pacific Standard Time) {}
   name: "TestImageAM.png"
   size: 186278
   type: "image/png"
   webkitRelativePath: ""
}

Answer 1

我個人認為最好的選擇是將 base64 圖像字符串轉換為這樣的 blob

    fetch(base64ImageString)
    .then((res) => res.blob())
    .then((blob) => {
      console.log(blob);
    });

它將 blob object 記錄到控制台，如下所示

Blob {size: 20832, type: "image/jpeg"}

然后使用 formData 上傳圖像，它支持像這樣以 blob 格式上傳圖像文件。

var formData = new FormData();
formData.append('my_image', blob);

您可以從此處的文檔中獲取有關如何使用 formData 上傳圖像的更多信息。

Answer 2

您需要做的就是將 Base64 Image URI 傳遞給JavaScript 的File構造函數，這應該會為您提供所需格式的 File object。

fileURI = 'data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg'
const file = new File(fileURI, 'anyname.jpg')
console.log('File Object', file)