使用 FormData 上傳 base64 編碼圖像？

Question

我有一個 jpeg 作為 base64 編碼字符串。

var image = "/9j/4AAQSkZJRgABAQEAS..."

我想使用 FormData 將此 jpeg 上傳到服務器。

var data = new FormData();

append 將圖像轉換為數據的正確方法是什么？

Answer 1

 var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }

Answer 2

您的圖像數據只不過是一個字符串，因此將其附加到您的 FormData 對象中，如下所示：

data.append("image_data", image);

然后在您的服務器端，您可以將其直接存儲在數據庫中或將其轉換為圖像並將其存儲在文件系統中。 您可能會發現這篇文章很有幫助。

Answer 3

我發現這篇文章（ 將數據 URI 轉換為文件然后附加到 FormData ）非常有幫助。 如果您的文件已經表示為 base64 編碼的字符串，您首先需要從中創建一個 blob 表示，然后您可以使用 FormData 附加。

Answer 4

為了記錄，這就像一個魅力

import * as FormData from "form-data";

base64: string, // it should start with "iVBORw0KGgoA...." instead of "data:image/png;base64,"

fileName: string // it should include file name and extension, like "saype.jpg" instead of "saype"

var formdata = new FormData();

//   base64 to buffer, https://stackoverflow.com/questions/37608249/convert-base64-image-to-a-file-in-node-js

let bf = Buffer.from(base64, "base64");

//   buffer to form/data, https://stackoverflow.com/questions/43913650/how-to-send-a-buffer-in-form-data-to-signserver

formdata.append("file", bf, fileName);

/* 
I tested it with .png, .docx, .pdf, it works
I have base64 data of a file at nodejs server,
I need to upload to discord with webhook, it accepts form/data
when i pass { contenttype:"..pdf", filename:"....pdf" } to formdata.append(), It failed
I dont know why it occured. maybe discord doesnt support contenttype at form/data
*/

此處復制記錄，來自https://gist.github.com/emindeniz99/0b415de896f5c335d253d870116d798f