遇到一个需求,就是需要把图片传给后台数据库,然后前端再读取数据库图片,有人说base64,请问一下base64是怎么上传的?前端把图片转为base64数据,传给后台,然后后台保存base64,之后前端读取的时候再解析base64?是这样理解的吗?还有其他方法吗?
前端用的是react,后台是java
遇到一个需求,就是需要把图片传给后台数据库,然后前端再读取数据库图片,有人说base64,请问一下base64是怎么上传的?前端把图片转为base64数据,传给后台,然后后台保存base64,之后前端读取的时候再解析base64?是这样理解的吗?还有其他方法吗?
前端用的是react,后台是java
前端把图片转为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);
});
});
大致这样,仅供参考,还有很多事件处理没写,请自行补充。
后台不建议用数据库存储,如果能上阿里oss这样的云存储服务最好,不行的话服务器单划一块儿空间存储也行,不过可能得留意别撑掉整个服务器。(有个h5项目被坑过,用户上传很快飙出去好几个G,服务器差点挂了……)
图片建议在前端压缩下,用户上传的通常在500k~10M这么个范围,稍微处理下保持在800k左右就差不多了(去掉的通常是些色彩配置信息啊EXIF或者是GPS信息这些东西,还有就是合理的压缩下格式,比如JPEG质量85),然后就可以打包传到后端的存储服务上了,比如阿里OSS。
27 回答13.1k 阅读
8 回答3.5k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
3 回答3.7k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
https://developer.mozilla.org...
可以使用
FormData
,其属于XHR Level 2
中内容。文件可以使用input:file
来进行上传,并获取fileInputElement.files[0]
作为value。具体使用可参照以上链接。