base64文件转MultipartFile文件 上传图片转base64

在一些项目中，上传图片或者文件过大，这个时候我们就要选择压缩文件，压缩到我们指定的范围内在上传到服务器，当然压缩也是可以放到服务器进行操作的，但是考虑到前端传输时间问题，所以我们一般都是放到前端压缩后在上传。

下面举个实例：

曾经遇见这么一个需求，前端页面需要调用相机拍照，把拍照的图片上传到服务，但是在这个过程中遇见的问题是，ios手机拍照的图片是比较大一般单张图片大小在10M左右，而Android机型却只有3M左右，如果这个页面需要上传三到四张图片不进行压缩的整个数据包就是30-40M这样上传到服务器是非常的耗时的，占带宽，而且体验很不好，所以就需要我们在前端把图片压缩了再进行上传。前端如何压缩

      /*
       三个参数
       file：一个是文件(类型是图片格式)，
       w：一个是文件压缩的后宽度，宽度越小，字节越小
       objDiv：一个是容器或者回调函数
       photoCompress()
       */
function photoCompress(file,w,objDiv){
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.οnlοad=function(){
                var re=this.result;
                canvasDataURL(re,w,objDiv)
     }
}
 
function canvasDataURL(path, obj, callback){
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
}
 
function setImagePreview(e,a) {
 
    var fileMsg = e.files[0];
    if(fileMsg==null){
                return;
    }
    //文件名
    var fileName = fileMsg.name;
    //大小 字节 
    var fileSize = fileMsg.size;
 
    /*调用
    * fileMsg 是input type="file" 的值
    * quality 压缩图片质量 范围是（0-1）
    * base64Codes  就是最终压缩成的图片
    */
    photoCompress(fileMsg, {
        quality: 0.3
     }, function(base64Codes){
       //这里可以一个图片预览 把base64Codes 赋值给img的src即可
    });
}
 

 
 
html的写法：

 

<input class="btn takepicture" type="file" name="img5q" id="img5q" accept="image/*"   οnchange="javascript:setImagePreview(this,5);"/>

其实图片压缩是很简单的，这里说明一下，如果需要上传到服务器的话，把base64Codes当成一个字符串传到服务器即可，mysql表中对应的字段类型可用用longtext来储存，但是longtext的长度也是有限制的，所以在上传的时候要控制文件大小。

 

后端（java）再接收到前端传来的base64字符怎么转成我们想要的MultipartFile类型文件 或者是File类型的都可以，

为什么要介绍MultipartFile，在java中很多的spring框架，都是用的MultipartFile，所以这里就举例介绍了。

代码：

创建一个名为BASE64DecodedMultipartFile的类，一定要实现MultipartFile接口。

public class BASE64DecodedMultipartFile implements MultipartFile {
  
    private final byte[] imgContent;
    private final String header;
  
    public BASE64DecodedMultipartFile(byte[] imgContent, String header) {
        this.imgContent = imgContent;
        this.header = header.split(";")[0];
    }
  
    @Override
    public String getName() {
        return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
    }
  
    @Override
    public String getOriginalFilename() {
        return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];
    }
  
    @Override
    public String getContentType() {
        return header.split(":")[1];
    }
  
    @Override
    public boolean isEmpty() {
        return imgContent == null || imgContent.length == 0;
    }
  
    @Override
    public long getSize() {
        return imgContent.length;
    }
  
    @Override
    public byte[] getBytes() throws IOException {
        return imgContent;
    }
  
    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(imgContent);
    }
  
    @Override
    public void transferTo(File dest) throws IOException, IllegalStateException {
        new FileOutputStream(dest).write(imgContent);
    }
  
    public static MultipartFile base64ToMultipart(String base64) {
        try {
            String[] baseStrs = base64.split(",");
  
            BASE64Decoder decoder = new BASE64Decoder();
            byte[] b = new byte[0];
            b = decoder.decodeBuffer(baseStrs[1]);
  
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            return new BASE64DecodedMultipartFile(b, baseStrs[0]);
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
  
}

调用方法：BASE64DecodedMultipartFile.base64ToMultipart("传入前端传来的base64字符串")。最终就会给我们返回一个MultipartFile类型的文件。