使用FormData上传Base64编码的图像？

Question

我有一个jpeg图像，以base64编码字符串的形式存在。

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

我想使用FormData将这个JPEG上传到服务器。

var data = new FormData();

如何正确地将图像附加到数据中？

- user1031947

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 })
      }

- DINESH Adhikari

---

干得好！我不明白为什么没有任何 JS 原生的方法可以做到这一点。无论如何，这种方法很有效，至少在我的情况下是这样。 - Juan Antonio

我刚刚浪费了两天时间，最终这个方法有效了。我可以确认这个方法可以在使用expo和图片选择器以及.net core时有效。使用这个方法与普通的fetch一起使用。 - rtp

这个解决方案对我非常有效。但是，我无法上传用手机相机拍摄的照片，我不知道为什么。 - EnigmaTech

我认为需要添加图像的名称。当我使用这种方法上传到服务器时，图像名称始终显示为Blob。 - Smith

Answer 2

您的图像数据无非就是一个字符串，因此请像这样将其附加到您的FormData对象中：

data.append("image_data", image);

然后在您的服务器端，您可以直接将其存储在数据库中或将其转换为图像并存储在文件系统中。您可能会发现这篇帖子有所帮助。

- HeadCode

Answer 3

我发现这篇文章（将Data URI转换为文件，然后附加到FormData中）非常有帮助。如果您的文件已经表示为base64编码的字符串，您需要首先从中创建一个blob表示，然后才能使用FormData append。

- Kevin

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://dev59.com/Wpffa4cB1Zd3GeqP_a4T

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

//   buffer to form/data, https://dev59.com/RlcP5IYBdhLWcg3wvMdF

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

这是一个使用 Python 和 Flask 框架创建一个 RESTful API 的示例代码。这个示例包含了一些常见的操作，如 GET、POST、PUT 和 DELETE。其中包括一个简单的数据库模型，并演示了如何在应用中使用该模型。

这个代码库还包括了一些常见的安全性处理，如 token 验证等。此外，还提供了一些常见问题的解答和使用 Flask 常见的插件和扩展。

如果你想学习如何使用 Flask 创建 RESTful API，那么这个示例代码可能会对你有所帮助。

- den232

---

“Blob”和“Buffer”是不同的东西，它们的接口差异很大，因此这不是一个好的方法来处理这个问题。特别是TypeScript会在这方面抛出错误。 - FrameMuse