Angular 8，上传（使用post multipart/form-data）FileReader.readAsDataURL的结果

Question

我的用例：

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

我找到了上传（示例 1 、示例 2 ）和预览的示例。 有 一个示例展示了两者。

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

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

其他相关问题：

1. 如何在服务器上以base64上传图像
2. 在javascript中将base64转换为blob

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,