前端图片压缩

参考网址
http://blog.csdn.net/tkg09/article/details/68947082
https://www.npmjs.com/package/lrz
https://github.com/think2011/localResizeIMG/blob/master/test/index.js

执行tnpm i lrz
1.dom

<a href="javascript:;" class="a-upload" title="上传">
    <input type="file" @change="onFileChange($event,index)" accept="image/jpeg,image/jpg,image/png">上传
</a>

2.js

压缩后获取 rst.base64
onFileChange: function(e, index) {
    var files = e.target.files || e.dataTransfer.files;
    var size = e.target.files[0].size / 1024;
    if (size > 4000) {
        alert("附件不能大于4M");
        event.target.value = "";
        return
    }
    if (!files.length) return;
    this.createImage(files, e, index);
},
createImage: function(file, e, index) {
    let self = this;
    lrz(file[0], {
        width: 800,
        height: 800,
        quality: 0.7,
    }).then(function(rst) {
        // vm.imgUrls.push(rst.base64);
        for (var i in self.applyUploadImages) {
            if (i == index) {
                self.applyUploadImages[i].ImageData.LargeContent = rst.base64;
                self.applyUploadImages[i].isUpload = true;
            } else {
                self.applyUploadImages[i].isUpload = false;
            }
        }
        return rst;
    }).always(function() {
        // 清空文件上传控件的值
        e.target.value = null;
    });
},