Angular8、上传（使用postmultipart/form-data）FileReader.readAsDataURL的结果

Question

我的用例：

用户打开图像文件（使用 input type="file"）。
图像随后显示在屏幕上，并存储在本地存储器中
在稍后（几天）用户点击一个按钮，图像应该通过 API 上传到服务器，基于使用 multipart/form-data 的 POST。

我找到了上传 (example 1, example 2) 和预览的示例。有one example showcasing both.

我的问题是，所有示例都使用文件填充 FormData，而不是基本编码 URL。如果预览和POSTing在时间上是分开的，那么两者都存储在本地存储中似乎是多余的。

所以我的问题是 - 如何将编码数据 URL 转换为 FormData 可接受的格式。直觉上应该是微不足道的，因为 POST 应该像在 URL 中那样编码二进制文件。这样做有标准做法吗？

其他相关问题：

how to upload image in base64 on server
Converting base64 to blob in javascript

Answer 1

好的，这对我有用。请注意，代码是从问题中提到的其他 SO 帖子中复制的。

private b64toArrayBuffer(dataURI) {
const byteString = atob(dataURI.split(',')[1]);
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return ia;
}


private b64toBlob(dataURI, mimetype) {
    return new Blob([this.b64toArrayBuffer(dataURI)], {
        type: mimetype
    });
}

const blob = this.b64toBlob(media.url, media.mimetype);
formData.append('file', blob);
return this.http.post(uploadUrl, formData,

Angular8、上传（使用postmultipart/form-data）FileReader.readAsDataURL的结果

Angular 8, upload (using post multipart/form-data) the result of FileReader.readAsDataURL

multipartform-data

image-uploading

image-upload

angular