javascript - JS圖片壓縮並且以檔案形式上傳

Question

WEBKIT中使用JS圖片壓縮上傳.
在選擇圖片時將圖片壓縮,取得圖片BASE64資料,
然後再提交表單時將圖片以File的形式上傳,
已經取到BASE資料,
但是上傳的檔案也是BASE64資料並不能直接使用File

#上傳以 multipart/form-data 的方式進行上傳

#問題在於' 上傳的檔案也是BASE64資料並不能直接使用File '

希望能得到解決問題的建議,或更好上傳的方式('在以 multipart/form-data 方式上傳的前提下')

Answer 1

為什麼要自己拼 form-data 呢，既然都用了 canvas 壓縮了，那瀏覽器一定已經支援 formData了啊。

方法一 使用 formData API 而非自己拼接

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

var formData = new FormData();
formData.append(name, value);
formData.append(name, fileBlob, filename);

xhr.send(formData);

法二 自己拼

壓縮使用的是 canvas，呼叫canvas的toBlob對象，然後使用fileReader的readAsBinaryString方法，得到blob物件的二進位字串，這個二進位字串才是 formdata 的content-disposition下面要填的東西。

你那個程式碼有點亂，看樣子imageView.attr('src') 是拿到了壓縮後圖片的base64 的dataURI，看有沒有方法能直接拿到binary String，如果不能，能獲得壓縮後的圖片的blob物件也行，自己用fileReader 轉換一下，再不行就用你的dataURItoBlob 物件把base64 的dataURI 轉換成blob，再轉換成二進位字串。

bodyData += imageUrl === null ? '' : dataURItoBlob(imageUrl);
// 这一句要改成

var resizedImageBlob = dataURItoBlob(imageUrl);
var reader = new FileReader();
reader.onloadend = function () {
  bodyData += this.result;
};
reader.readAsBinaryString(resizedImageBlob);

// 鉴于你代码本身有一个each循环，bodyData 最后还要 append 一个 boundary因为把 blob 转成二进制字符串的过程是异步的，这里的控制逻辑肯定要修改

Answer 2

圖片轉換成base64，不直接用表單上傳嗎。 。 。

Answer 3

目測canvas壓縮的圖片？那直接轉換成二進位上傳吧

Answer 4

後端接收BASE64解碼處理轉FILE