使用 FormData 上传 base64 编码图像？答案

【问题标题】：Upload a base64 encoded image using FormData?使用 FormData 上传 base64 编码图像？
【发布时间】：2014-10-31 05:01:28
【问题描述】：

我有一个 jpeg 作为 base64 编码的字符串。

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

我想使用 FormData 将此 jpeg 上传到服务器。

var data = new FormData();

将图像附加到数据的正确方法是什么？

【问题讨论】：

标签： javascript form-data

【解决方案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 })
      }

【讨论】：

干得好！。我不明白为什么没有任何 js 原生的方式来做到这一点。无论如何，这种方法效果很好，至少在我的情况下。
我只是浪费了 2 天的生命，终于成功了。我可以确认这适用于世博会和图像选择器以及 .net 核心。将其与正常提取一起使用。
这个解决方案非常适合我。但是，我无法上传用手机相机拍摄的照片，我不知道为什么。

【解决方案2】：

您的图像数据只不过是一个字符串，因此将其附加到您的 FormData 对象，如下所示：

data.append("image_data", image);

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

【讨论】：

【解决方案3】：

我发现这篇文章 (Convert Data URI to File then append to FormData) 很有帮助。如果您的文件已经表示为 base64 编码字符串，您首先需要从中创建一个 blob 表示，然后然后您可以使用 FormData append。

【讨论】：