怎么把图片从前端上传到服务器？

Question

遇到一个需求，就是需要把图片传给后台数据库，然后前端再读取数据库图片，有人说base64，请问一下base64是怎么上传的？前端把图片转为base64数据，传给后台，然后后台保存base64，之后前端读取的时候再解析base64？是这样理解的吗？还有其他方法吗？
前端用的是react，后台是java

Answer 1

https://developer.mozilla.org...

可以使用 FormData ，其属于 XHR Level 2 中内容。文件可以使用 input:file 来进行上传，并获取 fileInputElement.files[0] 作为value。

具体使用可参照以上链接。

Answer 2

前端把图片转为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);
        });
});

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

Answer 3

其实就是楼上两位的说法。算是基于H5吧。我用过formData和swfupload。

基于HTML5的可预览多图片Ajax上传

Answer 4

可以试试这个插件，http://fex.baidu.com/webuploa...，功能挺齐全的，开发了高德的相关功能，亲测很好用，有问题的可以问我

Answer 5

当文件上传就行了，也不用什么react框架，采用原生的html表单上传就行了。
如果觉得原生表单样式很丑的话，可以用事件来实现文件上传

Answer 6

后台不建议用数据库存储，如果能上阿里oss这样的云存储服务最好，不行的话服务器单划一块儿空间存储也行，不过可能得留意别撑掉整个服务器。（有个h5项目被坑过，用户上传很快飙出去好几个G，服务器差点挂了……）
图片建议在前端压缩下，用户上传的通常在500k~10M这么个范围，稍微处理下保持在800k左右就差不多了（去掉的通常是些色彩配置信息啊EXIF或者是GPS信息这些东西，还有就是合理的压缩下格式，比如JPEG质量85），然后就可以打包传到后端的存储服务上了，比如阿里OSS。

Answer 7

我之前写过一篇关于移动端H5上传图片的文章，里面基本上囊括了移动端这块图片上传的所有坑，大家可以看看

戳我跳转