javascript - JS图片压缩并且以文件形式上传

问题描述

问 题

WEBKIT中使用JS图片压缩上传.
在选择图片时将图片压缩,取得图片BASE64数据,
然后再提交表单时将图片以File的形式上传,
已经取到BASE数据,
但是上传的文件也是BASE64数据并不能直接使用File

上传以 multipart/form-data 的方式进行上传

问题在于' 上传的文件也是BASE64数据并不能直接使用File '

希望能得到解决问题的建议,或者更好上传的方式('在以 multipart/form-data 方式上传的前提下')

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

为什么要自己拼 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 转成二进制字符串的过程是异步的，这里的控制逻辑肯定要修改

这篇关于javascript - JS图片压缩并且以文件形式上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！