上传图片压缩处理

src/views/zaoquan/yiqing/yiqing-tiwen.vue

@@ -123,7 +123,7 @@
         </div>
         <div class="contents_nex">
           <div>请上传图片</div>
-          <van-uploader :after-read="afterRead" v-model="fileList" multiple />
+          <van-uploader :after-read="uploadImg" v-model="fileList" multiple />
           <!-- <van-uploader :after-read="afterRead" /> -->
           <!-- <input type="file" @change="getFile" ref="file" name="image" id="file" class="imgChoose"> -->
         </div>
@@ -197,7 +197,6 @@ export default {
       location: "gps暂无",
       times: getTime(), //填报时间
 
-      duration:0
     };
   },
   // witch: {
@@ -223,10 +222,32 @@ export default {
         _that.district = result.addressComponent.district;
       });
     },
-    afterRead(file) {
-      // 此时可以自行将文件上传至服务器
-      console.log(file);
+
+    uploadImg(file) {
+      // 大于3MB的jpeg和png图片都缩小像素上传
+      if (/\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 3000000) {
+        // 创建Canvas对象(画布)
+        let canvas = document.createElement("canvas");
+        // 获取对应的CanvasRenderingContext2D对象(画笔)
+        let context = canvas.getContext("2d");
+        // 创建新的图片对象
+        let img = new Image();
+        // 指定图片的DataURL(图片的base64编码数据)
+        img.src = file.content;
+        // 监听浏览器加载图片完成，然后进行绘制
+        img.onload = () => {
+          // 指定canvas画布大小，该大小为最后生成图片的大小
+          canvas.width = 800;
+          canvas.height = 600;
+          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。*/
+          /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/
+          context.drawImage(img, 0, 0, 800, 600);
+          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
+          file.content = canvas.toDataURL(file.file.type, 0.92);
+        }
+      }
     },
+
     //接种疫苗
     reasons() {
       this.reason = !this.reason;
@@ -293,7 +314,7 @@ export default {
         // console.log(this.yimiao);
         // console.log(this.times);
         // console.log(typeof this.tiwen);
-        // console.log(this.fileList);
+        console.log(this.fileList);
 
         // console.log(images);
 
@@ -305,8 +326,8 @@ export default {
         this.$toast.loading({
           message: "提交中...",
           forbidClick: true,
-          overlay:true,
-          duration:this.duration
+          overlay: true,
+          duration: this.duration,
         });
 
         this.$http
@@ -328,7 +349,7 @@ export default {
             }
           )
           .then((res) => {
-            this.$toast.clear()
+            this.$toast.clear();
             console.log(res);
 
             if(res.data.code == 1){
@@ -349,7 +370,7 @@ export default {
             // this.$router.push(`/zaoquan/yiqing/yiqing?token=${this.token}`);
           })
           .catch((res) => {
-            this.$toast.clear()
+            this.$toast.clear();
             this.$toast("提交失败");
             console.log(res);
           });