vue使用vant图片上传对图片进行压缩

1.使用方法

        //压缩图片
        Vue.prototype.$compress=function (fileObj) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                reader.readAsDataURL(fileObj)
                reader.onload = function(e) {
                    let image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
                    image.src = e.target.result    //让该标签加载base64格式的原图
                    image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
                        let canvas = document.createElement('canvas'), //创建一个canvas元素
                            context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
                            imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
                            imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
                            data = ''    //存储压缩后的图片
                        canvas.width = imageWidth    //设置绘图的宽度
                        canvas.height = imageHeight    //设置绘图的高度

                        //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
                        context.drawImage(image, 0, 0, imageWidth, imageHeight)
                        //使用toDataURL将canvas上的图片转换为base64格式
                        data = canvas.toDataURL('image/jpeg');
                        canvas.toBlob(function (blob) {
                            const f = new File([blob], fileObj.name,{type: 'image/jpeg'});
                            resolve(f);
                        },'image/jpeg')
                    }
                }
            })

        }

2.调用

 <van-uploader v-model="cdata.value" :max-count="cdata.maxCont"  :before-read="beforeRead"/>

            beforeRead(file){
               return this.$compress(file)
            }

有时间可以自己封装一个文件上传组件，将图片压缩封装好，数据格式可以定义成自己想要的