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,