Use JS image compression to upload in WEBKIT.
Compress the image when selecting the image and obtain the BASE64 data of the image.
Then upload the image in the form of File when submitting the form.
The BASE has been obtained Data,
But the uploaded file is also BASE64 data and File
Upload in the form of multipart/form-data
The problem is that 'the uploaded file is also BASE64 data and File cannot be used directly'
Hope to get suggestions to solve the problem, or a better way to upload ('under the premise of uploading in multipart/form-data mode')
Why do you have to spell form-data yourself? Since it is compressed using canvas, the browser must already support formData.
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);
Compression uses canvas, calls canvas's toBlob object, and then uses fileReader's readAsBinaryString method to get the binary string of the blob object. This binary string is what needs to be filled in under the content-disposition of formdata.
Your code is a bit messy. It seems that imageView.attr('src') gets the base64 dataURI of the compressed image. See if there is a way to get the binary String directly. If not, you can get the blob of the compressed image. Objects are also fine. Use fileReader to convert them yourself. If that doesn't work, use your dataURItoBlob object to convert the base64 dataURI into a blob, and then convert it into a binary string.
bodyData += imageUrl === null ? '' : dataURItoBlob(imageUrl);
// 這一句要改成
var resizedImageBlob = dataURItoBlob(imageUrl);
var reader = new FileReader();
reader.onloadend = function () {
bodyData += this.result;
};
reader.readAsBinaryString(resizedImageBlob);
// 鑒于你代碼本身有一個(gè)each循環(huán),bodyData 最后還要 append 一個(gè) boundary因?yàn)榘?blob 轉(zhuǎn)成二進(jìn)制字符串的過程是異步的,這里的控制邏輯肯定要修改
Convert the image to base64, why not upload it directly using the form? . .
Visually inspect canvas-compressed images? Then convert it directly to binary and upload it
The backend receives BASE64 decoding and processes it and converts it to FILE