vue + vant 实现图片预览，删除，压缩，上传(2019.12.04)

template部分

<div>
	<van-uploader
	   :capture="'camera'"
	   v-model="fileList"
	   :before-delete="afterDelete"
	   :before-read="beforeRead"
	   :after-read="afterRead"
	 />
	 <div class="shibie">
	   <van-button :disabled="isloadImg" type="info" @click="submitImg" block>识别</van-button>
	 </div>
</div>

js部分

data() {
	return {
		fileList:[]
	};
},
methods:{
	// 上传之前
	async beforeRead(file) {
	    console.log(file, "beforeRead");
	    return new Promise((resolve, reject) => {
	        this.isloadImg = true;
	        let ishas = this.fileList.some(function(cur, i, arr) {
	            return cur.file.name === file.name;
	        });
	        if (ishas) {
	            this.$alert("图片已存在");
	            this.isloadImg = false;
	            return;
	        }
	        if (file.type.indexOf("image/") === -1) {
	            this.$alert("请上传 jpg 格式图片");
	            reject();
	        } else {
	            this.imgPreview(file);
	            resolve();
	        }
	    });
	},
	//删除之后的回调
	async afterDelete(file) {
	    this.isloadImg = true;
	    return new Promise((resolve, reject) => {
	        console.log("删除文件的回调,afterDelete");
	        this.isloadImg = false;
	        resolve();
	    });
	},
	afterRead(file) {
	    //上传完成
	    console.log(file, "afterRead");
	},
	imgPreview(file) {
	    let self = this;
	    // 看支持不支持FileReader
	    if (!file || !window.FileReader) return;
	    let reader = new FileReader();
	    // 将图片2将转成 base64 格式
	    reader.readAsDataURL(file);
	    // 读取成功后的回调
	    reader.onloadend = function() {
	        //此处的this是reader
	        let result = this.result;
	        let img = new Image();
	        // console.log(result,'2222222222222')
	        img.src = result;
	        //判断图片是否大于500K,是就直接上传，反之压缩图片
	        if (this.result.length <= 500 * 1024) {
	            file.cusContent = result;
	            self.isloadImg = false;
	        } else {
	            img.onload = function() {
	                let data = self.compress(img);
	                file.cusContent = data;
	                self.isloadImg = false;
	            };
	        }
	    };
	},
	// 压缩图片
	compress(img) {
	    let canvas = document.createElement("canvas");
	    let ctx = canvas.getContext("2d");
	    //瓦片canvas
	    let tCanvas = document.createElement("canvas");
	    let tctx = tCanvas.getContext("2d");
	    let width = img.width;
	    let height = img.height;
	    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
	    let ratio;
	    if ((ratio = (width * height) / 4000000) > 1) {
	        ratio = Math.sqrt(ratio);
	        width /= ratio;
	        height /= ratio;
	    } else {
	        ratio = 1;
	    }
	    canvas.width = width;
	    canvas.height = height;
	    //铺底色
	    ctx.fillStyle = "#fff";
	    ctx.fillRect(0, 0, canvas.width, canvas.height);
	    //如果图片像素大于100万则使用瓦片绘制
	    let count;
	    if ((count = (width * height) / 1000000) > 1) {
	        // console.log("超过100W像素"); ~~ 是利于符号转换成数字类型
	        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
	        //      计算每块瓦片的宽和高
	        let nw = ~~(width / count);
	        let nh = ~~(height / count);
	        tCanvas.width = nw;
	        tCanvas.height = nh;
	        for (let i = 0; i < count; i++) {
	            for (let j = 0; j < count; j++) {
	                tctx.drawImage(
	                    img,
	                    i * nw * ratio,
	                    j * nh * ratio,
	                    nw * ratio,
	                    nh * ratio,
	                    0,
	                    0,
	                    nw,
	                    nh
	                );
	                ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
	            }
	        }
	    } else {
	        ctx.drawImage(img, 0, 0, width, height);
	    }
	    //进行最小压缩
	    let ndata = canvas.toDataURL("image/jpeg", 0.3);
	    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
	    // console.log(ndata,'压缩后的base64');
	    return ndata;
	}
}

因为引入Exif失败，不能实现照片的旋转，完整代码参考连接：https://www.jb51.net/article/162760.htm