h5图片压缩上传

1.做这个确实有必要的，有的手机拍出来的照片很大，然后加上网速一般，上传很慢，一直等待，好不容易等到资源上传时间结束了，但是后端接口又超时了。太久了，用户体验肯定不好。简直可以说是没办法继续使用了。

2.已经可以查到好多人写好的。但是直接拿来复用，总有这样那样的问题。

3.我用的是vue框架，本来打算用原生的方式。就是网上很多大神写好的，贴一张别人写的代码图

这样就拿到了图片的base64地址。

然后再把img画到canvas上，然后再转成blob形式上传。可是也许是上传格式的问题。我这边总是上传失败。so放弃了这种写法。

4.还是决定用插件，比较简单些。localResizeIMG；装个依赖cnpm i lrz --save;页面中引入 import lrz from 'lrz';然后可以在监听事件中使用了。

      

lrz(file)
    .then((res)=>{
        let data = new FormData();
        data.append('file', convertBase64UrlToBlob(res.base64))
        axios.post('xxxxxx', data)
            .then((res) => {
              //处理上传成功之后
            }).catch(() => {
                //处理失败
            })
        }).catch(() => {})

 //lrz可以设置参数，也可以不设置，默认质量是0.7,宽度是原来的宽度。这样压缩下来之后图片大概是原图十分之一的大小。

//参数文档可访问这里 http://www.bcty365.com/content-69-5392-1.html

function convertBase64UrlToBlob(urlData){
    var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob( [ab] , {type : 'image/png'});
}

这个是把base64格式转化成blob形式，可以让后端接收的二进制形式。

这样就ok啦。