图片上传优化

src/views/homestead/index.vue

@@ -726,11 +726,22 @@
           </div>
           <!--2-->
           <div class="uploadPicturesFlex_block">
-            <div class="title_m">上传图片</div>
+            <div class="title_m">上传历史图片</div>
             <div class="main_m">
               <van-uploader
-                v-model="nfAddfileList"
-                :after-read="nfAddimgonRead"
+                v-model="nfAddfileListHistory"
+                :after-read="nfAddimgonReadHistory"
+                :max-count="1"
+                accept="image/gif, image/jpeg, image/png"
+              />
+            </div>
+          </div>
+          <div class="uploadPicturesFlex_block">
+            <div class="title_m">上传现状图片</div>
+            <div class="main_m">
+              <van-uploader
+                v-model="nfAddfileListNow"
+                :after-read="nfAddimgonReadNow"
                 :max-count="1"
                 accept="image/gif, image/jpeg, image/png"
               />
@@ -904,11 +915,22 @@
 
           <!--2-->
           <div class="uploadPicturesFlex_block">
-            <div class="title_m">上传图片</div>
+            <div class="title_m">上传历史图片</div>
+            <div class="main_m">
+              <van-uploader
+                v-model="ndAddfileListHistory"
+                :after-read="ndAddimgonReadHistory"
+                :max-count="1"
+                accept="image/gif, image/jpeg, image/png"
+              />
+            </div>
+          </div>
+          <div class="uploadPicturesFlex_block">
+            <div class="title_m">上传现状图片</div>
             <div class="main_m">
               <van-uploader
-                v-model="ndAddfileList"
-                :after-read="ndAddimgonRead"
+                v-model="ndAddfileListNow"
+                :after-read="ndAddimgonReadNow"
                 :max-count="1"
                 accept="image/gif, image/jpeg, image/png"
               />
@@ -942,7 +964,7 @@
 import $ from "jquery";
 import {
   hcBottomSearch,
-  commonUpload,
+  //commonUpload,
   houseAdd,
   landAdd,
   treeselectByUser,
@@ -1100,9 +1122,15 @@ export default {
       xdlzCirculationVisbile: false, //农房 - 是否有流转  弹窗
 
       //农房上传图片附件
-      nfAddfileList: [],
+      //nfAddfileList: [],
+      //农房上传历史图片
+      nfAddfileListHistory:[],
+      //农房上传现状图片
+      nfAddfileListNow:[],
       //农地上传图片附件
-      ndAddfileList: [],
+      //ndAddfileList: [],
+      ndAddfileListHistory:[],
+      ndAddfileListNow:[],
       // 当前是否地图点击状态
       hasTable: false,
       //查看农地\农房 显隐
@@ -1400,7 +1428,8 @@ export default {
               // on confirm
               houseInfoList.theGeom ="["+houseInfoList.theGeom+"]"
               //houseInfoList.frontHouse = location.protocol+"//"+location.host+request.defaults.baseURL+ this.houseInfoList.frontHouse;
-              //console.log("地址"+houseInfoList.frontHouse);
+              console.log("地址"+houseInfoList.frontHouse);
+              console.log("地址"+houseInfoList.behindHouse);
               houseAdd(houseInfoList).then((res) => {
                 if (res.code == 200) {
                   this.landHomesteadEditVisbileFun("hide");
@@ -1437,6 +1466,9 @@ export default {
             .then(() => {
               // on confirm
               //houseInfoList.frontHouse = location.protocol+"//"+location.host+request.defaults.baseURL+ this.houseInfoList.frontHouse;
+              console.log("修改地址"+houseInfoList.frontHouse);
+              houseInfoList.behindHouse =this.houseInfoList.behindHouse;
+              console.log("修改地址"+houseInfoList.behindHouse);
               houseEdit(houseInfoList).then((res) => {
                 if (res.code == 200) {
                   this.landHomesteadEditVisbileFun("hide");
@@ -1664,9 +1696,11 @@ export default {
       };
 
       //农房上传图片附件
-      this.nfAddfileList = [];
+      this.nfAddfileListHistory = [];
+      this.nfAddfileListNow = [];
       //农地上传图片附件
-      this.ndAddfileList = [];
+      this.ndAddfileListHistory = [];
+      this.ndAddfileListNow = [];
 
       //隐藏下方绘制地图操作栏
       this.searchBarOperVisbile = false;
@@ -2154,9 +2188,11 @@ export default {
             })
             .then(function (html) {
               //农房上传图片附件
-              _this.nfAddfileList = [];
+              _this.nfAddfileListHistory = [];
+              _this.nfAddfileListNow = [];
               //农地上传图片附件
-              _this.ndAddfileList = [];
+              _this.ndAddfileListHistory = [];
+              _this.ndAddfileListNow = [];
               if (html.indexOf("<table") != -1) {
                 setTimeout(() => {
                   map.removeLayer(texiao_layer_fang);
@@ -2242,8 +2278,8 @@ export default {
                     obj.behindHouse = trs.find("td").eq(25).text(); //图片后
                     let cloneObj = JSON.parse(JSON.stringify(obj));
                     _this.houseInfoList = cloneObj;
-                    _this.houseInfoList.frontland = "";
-                    _this.houseInfoList.behindland = "";
+                    // _this.houseInfoList.frontland = "";
+                    // _this.houseInfoList.behindland = "";
                     _this.houseInfoLookList = obj;
                   } else {
                     _this.farmhouseStatus = 1;
@@ -2271,8 +2307,8 @@ export default {
                     let cloneObj = JSON.parse(JSON.stringify(obj));
                     _this.landInfoList = cloneObj;
                     //编辑图片清空
-                    _this.landInfoList.frontland = "";
-                    _this.landInfoList.behindland = "";
+                    // _this.landInfoList.frontland = "";
+                    // _this.landInfoList.behindland = "";
                     _this.landInfoLookList = obj;
                   }
                 }, 300);
@@ -2931,8 +2967,8 @@ export default {
             obj.behindHouse = select_fang.behind_house; //图片后
             let cloneObj = JSON.parse(JSON.stringify(obj));
             _this.houseInfoList = cloneObj;
-            _this.houseInfoList.frontland = "";
-            _this.houseInfoList.behindland = "";
+            // _this.houseInfoList.frontland = "";
+            // _this.houseInfoList.behindland = "";
             _this.houseInfoLookList = obj;
             //关联查询农房信息---------------end
             //定位结束 --------------start
@@ -3151,6 +3187,8 @@ export default {
             // // _this.nydlxOptionsValue = trs.find("td").eq(5).text(); //农用地类型
             let cloneObj = JSON.parse(JSON.stringify(obj));
             _this.landInfoList = cloneObj;
+            // _this.landInfoList.frontland = "";
+            // _this.landInfoList.behindland = "";
             _this.landInfoLookList = obj;
             //关联查询农地信息  ----------end
           })
@@ -3213,7 +3251,7 @@ export default {
     //     this.houseInfoList.frontHouse = res.url;
     //   });
     // },
-    nfAddimgonRead(file) {
+    nfAddimgonReadHistory(file) {
       // 创建Canvas对象(画布)
       let canvas =  document.createElement('canvas')
       // 获取对应的CanvasRenderingContext2D对象(画笔)
@@ -3245,6 +3283,44 @@ export default {
           //this.houseInfoList.frontHouse =res.fileName
           if(res.code ==200){
             this.houseInfoList.frontHouse = location.protocol+"//"+location.host+request.defaults.baseURL+ res.fileName;
+            console.log("历史"+this.houseInfoList.frontHouse);
+          }else{
+            return "图片上传失败"
+          }
+        })
+      }
+    },
+    nfAddimgonReadNow(file) {
+      // 创建Canvas对象(画布)
+      let canvas =  document.createElement('canvas')
+      // 获取对应的CanvasRenderingContext2D对象(画笔)
+      let context = canvas.getContext('2d')
+      // 创建新的图片对象
+      let img = new Image()
+      // 指定图片的DataURL(图片的base64编码数据)
+      img.src = file.content
+      img.onload = () => {
+        const h = img.height
+        const w = img.width
+        let ch = img.height/4
+        let cw = img.width/4
+        let canvas = document.createElement('canvas')
+        let ctx = canvas.getContext('2d')
+        canvas.height = ch
+        canvas.width = cw
+        ctx.clearRect(0,0,cw,ch)
+        ctx.drawImage(img,0,0,cw,ch)
+        let base_img = canvas.toDataURL('image/jpeg')
+        const blobBin = atob(base_img.split(',')[1])
+        let d = []
+        for (let i=0;i<blobBin.length;i++){
+          d.push(blobBin.charCodeAt(i))
+        }
+        const data2 = new FormData();
+        data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+        uploadFileBase(data2).then(res => {
+          if(res.code ==200){
+            this.houseInfoList.behindHouse = location.protocol+"//"+location.host+request.defaults.baseURL+ res.fileName;
           }else{
             return "图片上传失败"
           }
@@ -3260,7 +3336,7 @@ export default {
     //     console.log(this.landInfoList.frontland);
     //   });
     // },
-    ndAddimgonRead(file) {
+    ndAddimgonReadHistory(file) {
       // 创建Canvas对象(画布)
       let canvas =  document.createElement('canvas')
       // 获取对应的CanvasRenderingContext2D对象(画笔)
@@ -3297,6 +3373,43 @@ export default {
         })
       }
     },
+    ndAddimgonReadNow(file) {
+      // 创建Canvas对象(画布)
+      let canvas =  document.createElement('canvas')
+      // 获取对应的CanvasRenderingContext2D对象(画笔)
+      let context = canvas.getContext('2d')
+      // 创建新的图片对象
+      let img = new Image()
+      // 指定图片的DataURL(图片的base64编码数据)
+      img.src = file.content
+      img.onload = () => {
+        const h = img.height
+        const w = img.width
+        let ch = img.height/4
+        let cw = img.width/4
+        let canvas = document.createElement('canvas')
+        let ctx = canvas.getContext('2d')
+        canvas.height = ch
+        canvas.width = cw
+        ctx.clearRect(0,0,cw,ch)
+        ctx.drawImage(img,0,0,cw,ch)
+        let base_img = canvas.toDataURL('image/jpeg')
+        const blobBin = atob(base_img.split(',')[1])
+        let d = []
+        for (let i=0;i<blobBin.length;i++){
+          d.push(blobBin.charCodeAt(i))
+        }
+        const data2 = new FormData();
+        data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+        uploadFileBase(data2).then(res => {
+          if(res.code ==200){
+            this.landInfoList.behindland = location.protocol+"//"+location.host+request.defaults.baseURL+ res.fileName;
+          }else{
+            return "图片上传失败"
+          }
+        })
+      }
+    },
   },
 };
 </script>