PHP将图片文件发送到前端,javascript - 怎么把图片从前端上传到服务器？

黄舟2017-04-11 11:50:147楼

前端把图片转为base64数据，传给后台，然后后台保存base64，之后前端读取的时候再解析base64

是的，可以这样子。转为base64数据后就是一段字符串，POST上传就好了

但是一般不会采用这种方案，因为

1.Base64要求把每三个8Bit的字节转换为四个6Bit的字节(38 = 46 = 24)，然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的数据理论上将要比原来的大1/3，消耗流量，浪费空间。

2.你转化为Base64之后怎么存储呢？存储在数据库吗？那又要多支付访问数据库的开销。存储为图片文件吗？那又要转换回来，也是增加了解析转换的开销。

3.浏览器的兼容问题，IE 8 以下不支持 data url，IE 8 开始支持 data url，却有大小限制。

所以，一般就是把图片当文件上传(multipart/form-data)，然后存储于后台的静态目录，GET访问就好了

表单形式上传最简单了，谷歌一下有很多例子，在此就不多说了。

说一下用js上传吧，参考代码：

// -------- 将以base64的图片url数据转换为Blob --------

function convertBase64UrlToBlob(urlData, filetype){

//去掉url的头，并转换为byte

var bytes = window.atob(urlData.split(',')[1]);

//处理异常,将ascii码小于0的转换为大于0

var ab = new ArrayBuffer(bytes.length);

var ia = new Uint8Array(ab);

var i;

for (i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob([ab], {type : filetype});

}

$input.on('change', function (e) {

var input = $input.get(0);

var files = input.files || [];

if (files.length === 0) {

return;

}

console.log('选中 ' + files.length + ' 个文件');

// 遍历选中的文件，预览、上传

$.each(files, function (key, file) {

var filename = file.name || '';

var fileType = file.type || '';

var reader = new FileReader();

// onload事件

reader.onload = function (e) {

var base64 = e.target.result || this.result;

var formData = new FormData();

formData.append("upload_file", convertBase64UrlToBlob(base64, fileType), filename);

var xhr = new XMLHttpRequest();

// 开始上传

xhr.open('POST', uploadImgUrl, true);

// 发送数据

xhr.send(formData);

});

reader.readAsDataURL(file);

});

});

大致这样，仅供参考，还有很多事件处理没写，请自行补充。