认定了 就要好好的珍惜对待，人生不容辜负，你必须要更加努力 。加油 骚年。
正文：
vue在结合vant写移动端的时上传图片给后台一般是直接上传整个文件
那么肯定对图片的大小有限制 这时候就需要压缩图片大小了
直接拿去复制即可使用 记得装包 废话少说 直接干就完事了
<template><van-uploader:max-count="1"v-model="identityCard":after-read="onRead"></van-uploader></template>npm install exif-js --save 安装 并且引入import axios from "axios"; // 引入axios //这里解释下 只所以单独引入一次axios 是不能走封装好的axios 因为传的是文件流传不过去 所以单独拿出来传import Exif from 'exif-js'data() {return {// 图片信息files: {name: "",type: ""},}},methods:{// 点击上传图片 onRead(file) {this.files.name = file.file.name; // 获取文件名this.files.type = file.file.type; // 获取类型this.imgPreview(file.file); //这一块传的是file.file 那后面才传给后台的 就不需要file.file}// 处理图片imgPreview(file) {let self = this;let Orientation;//去获取拍照时的信息，解决拍出来的照片旋转问题 npm install exif-js --save 这里需要安装一下包Exif.getData(file, function () {Orientation = Exif.getTag(this, "Orientation");});// 看支持不支持FileReaderif (!file || !window.FileReader) return;if (/^image/.test(file.type)) {// 创建一个readerlet reader = new FileReader();// 将图片2将转成 base64 格式reader.readAsDataURL(file);// 读取成功后的回调reader.onloadend = function () {let result = this.result;let img = new Image();img.src = result;//判断图片是否大于600K,否就直接上传，反之压缩图片console.log(this.result.length);if (this.result.length <= 600 * 1024) {// 上传图片self.postImg(this.result);} else {img.onload = function () {let data = press(img, Orientation);// 上传图片self.postImg(data);};}};}},// 压缩图片compress(img, Orientation) {// console.log(img, Orientation);let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");//瓦片canvaslet tCanvas = document.createElement("canvas");let tctx = tCanvas.getContext("2d");// let initSize = img.src.length;let width = img.width;let height = img.height;//如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratio;if ((ratio = (width * height) / 4000000) > 1) {// console.log("大于400万像素");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);}//修复ios上传图片的时候 被旋转的问题if (Orientation != "" && Orientation != 1) {switch (Orientation) {case 6: //需要顺时针（向左）90度旋转this.rotateImg(img, "left", canvas);break;case 8: //需要逆时针（向右）90度旋转this.rotateImg(img, "right", canvas);break;case 3: //需要180度旋转this.rotateImg(img, "right", canvas); //转两次this.rotateImg(img, "right", canvas);break;}}//进行最小压缩let ndata = canvas.toDataURL("image/jpeg", 0.2);tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;// console.log(ndata);return ndata;},// 旋转图片rotateImg(img, direction, canvas) {//最小与最大旋转方向，图片旋转4次后回到原方向const min_step = 0;const max_step = 3;if (img == null) return;//img的高度和宽度不能在img元素隐藏后获取，否则会出错let height = img.height;let width = img.width;let step = 2;if (step == null) {step = min_step;}if (direction == "right") {step++;//旋转到原位置，即超过最大值step > max_step && (step = min_step);} else {step--;step < min_step && (step = max_step);}//旋转角度以弧度值为参数let degree = (step * 90 * Math.PI) / 180;let ctx = canvas.getContext("2d");switch (step) {case 0:canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0);break;case 1:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, 0, -height);break;case 2:canvas.width = width;canvas.height = height;ctx.rotate(degree);ctx.drawImage(img, -width, -height);break;case 3:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, -width, 0);break;}},//将base64转换为文件dataURLtoFile(dataurl) {var arr = dataurl.split(","),bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}console.log(u8arr);return new File([u8arr], this.files.name, {type: this.files.type,});},// 提交图片到后端postImg(base64){let file = this.dataURLtoFile(base64);console.log(file)this.showloading = true;this.maskLayer = true;var ininsData = new window.FormData(); //构造一个 FormData，把后台需要发送的参数添加ininsData.append("file", file); //接口需要传的参数console.log(ininsData);axios.post("写传给后台的地址 ", ininsData, {headers: {"Content-Type": "multipart/form-data",},}).then((res) => {console.log(res)}).catch((err) => {});}}
如有不足之处请指出来 或联系邮箱 yuyong1663519276@ 谢谢
