国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社群

學習

工具庫

AI工具

休閒

繁體中文

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

淡淡煙草味 2017-05-18 10:58:12

1833

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

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

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

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

淡淡煙草味

全部回覆(4)

左手右手慢動作2017-05-18 11:00:12 4樓

為什麼要自己拼 form-data 呢，既然都用了 canvas 壓縮了，那瀏覽器一定已經(jīng)支援 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循環(huán)，bodyData 最后還要 append 一個 boundary因為把 blob 轉成二進制字符串的過程是異步的，這里的控制邏輯肯定要修改