确权调查移动端

src/api/authenticRight/index.js

@@ -70,3 +70,11 @@ export function uploadFile(data) {
     data: data
   })
 }
+// 修改农户抽样
+export function uploadFileBase(data) {
+  return request({
+    url: '/common/upload',
+    method: 'post',
+    data: data
+  })
+}

src/components/uploader/uploader.vue

@@ -1,186 +0,0 @@
-<template>
-  <div class="van-ov-upload-root">
-    <van-uploader ref="van_uploader"
-                  capture="camera"
-                  v-model="value"
-                  :max-count="maxCount"
-                  preview-size="65px"
-                  @delete="deleteFile"
-                  @oversize="uploadFileOverSize"
-                  :loop="false" max-size="5242880">
-      <img class="el-ov-uploader-file" slot="default" @click.stop="showActionSheet($event)"
-           src="../../assets/common/icon_upload.png" width="72px"
-           alt="">
-    </van-uploader>
-  </div>
-</template>
-
-<script>
-  import {Toast} from "vant";
-  import {getFileInfoList} from "@/api/common";
-
-  export default {
-    name: "van-ov-uploader",
-    props: {
-      value: {
-        default: Array
-      },
-      pictureid: {
-        default: String
-      },
-      maxCount: {
-        default: 6
-      }
-    },
-    data() {
-      return {
-        deleteFileIds: [],
-        pictureList: []
-      }
-    },
-    watch: {
-      value: function (val) {
-        this.deleteFileInput()
-      }
-    },
-    mounted() {
-      this.deleteFileInput()
-    }, beforeUpdate() {
-      this.deleteFileInput()
-    },
-    updated() {
-      this.deleteFileInput()
-    },
-    methods: {
-      deleteFileInput() {
-        document.getElementsByClassName('van-uploader__input')[0].remove()
-      },
-      showActionSheet(event) {
-        event.preventDefault();
-        let that = this
-        uexWindow.actionSheet({
-          title: "",
-          cancel: "取消",
-          buttons: "拍照上传,本地上传"
-        }, function (index) {
-          if (index == 0) {
-            try {
-              uexCamera.open(1, '', function (data) {
-                let uploader = uexUploaderMgr.create({
-                  url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
-                  type: 1
-                });
-                if (!uploader) {
-                  alert("创建失败!");
-                }
-                uexUploaderMgr.uploadFile(uploader, data, "file", 1, 640, function (packageSize, percent, responseString, status) {
-                  if (status == 1) {
-                    let data = {
-                      parentId: that.pictureid,
-                    }
-                    this.pictureList = []
-                    getFileInfoList(data).then((resp) => {
-                      if (resp.code == 1 && resp.data.rows.length != 0) {
-                        let item = resp.data.rows[resp.data.rows.length - 1]
-                        that.value.push({
-                          url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
-                          isImage: true
-                        })
-                        that.deleteFileInput()
-                      }
-                    }).catch()
-                  } else if (status == 2) {
-                    alert("上传失败");
-                  }
-                  that.deleteFileInput()
-                });
-              })
-            } catch (e) {
-              alert(JSON.stringify(e))
-            }
-
-          } else if (index == 1) {
-            //打开多图片选择器
-            var data = {
-              min: 1,
-              max: 1,
-              quality: 1,
-              detailedInfo: true,
-              // style: 1,
-            };
-            uexImage.openPicker(data, function (error, info) {
-              if (error == -1) {
-              } else if (error == 0) {
-                if (info.detailedImageInfo) {
-                  info.detailedImageInfo.map(async (item) => {
-                    var uploader = uexUploaderMgr.create({
-                      url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
-                      type: 1
-                    });
-                    if (!uploader) {
-                      alert("创建失败!");
-                    }
-                    uexUploaderMgr.uploadFile(uploader, item.localPath, "file", 0, 640, function (packageSize, percent, responseString, status) {
-                      if (status == 1) {
-                        let data = {
-                          parentId: that.pictureid,
-                        }
-                        this.pictureList = []
-                        getFileInfoList(data).then((resp) => {
-                          if (resp.code == 1 && resp.data.rows.length != 0) {
-                            let item = resp.data.rows[resp.data.rows.length - 1]
-                            that.value.push({
-                              url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
-                              isImage: true
-                            })
-                          }
-                          that.deleteFileInput()
-                        })
-                      }
-                    })
-                  })
-                }
-              }
-            });
-            that.deleteFileInput()
-          }
-        });
-      },
-
-      deleteFile(obj) {
-        let url = obj.url
-        let fileId = url.substr(url.lastIndexOf("fileId=") + 7)
-        this.deleteFileIds.push(fileId)
-      }
-      ,
-      uploadFileOverSize(obj) {
-        Toast("图片大小超出限制，图片大小应在 5MB 之内");
-      }
-      ,
-    }
-  }
-</script>
-
-<style lang="scss">
-  .van-ov-upload-root {
-    .van-uploader__input-wrapper {
-      width: 72px;
-      height: 72px;
-
-    }
-
-    .el-ov-uploader-file {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 72px;
-      height: 72px;
-      overflow: hidden;
-      cursor: pointer;
-    }
-  }
-
-</style>
-————————————————
-版权声明：本文为CSDN博主「bydongxin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
-原文链接：https://blog.csdn.net/bydongxin/article/details/108367086

src/views/authenticRight/index.vue

@@ -126,6 +126,10 @@
           placeholder="被核查人身份证号"
           :rules="[{ required: true, message: '请填写被核查人身份证号' }]"
         />
+        <van-row type="flex" justify="space-around">
+          <van-col span="9"><van-uploader v-model="fileList1" :after-read="afterRead1" @delete="remove(1)" :max-count="1" :accept="'image/*'" capture="camera"></van-uploader></van-col>
+          <van-col span="9"><van-uploader v-model="fileList2" :after-read="afterRead2" @delete="remove(2)"  :max-count="1" :accept="'image/*'" capture="camera"></van-uploader></van-col>
+        </van-row>
         <h2 class="van-doc-demo-block__title">农村土地承包经营权证</h2>
         <van-field name="item1" label="是否有证书" label-width="200px">
           <template #input>
@@ -480,7 +484,7 @@
     getInvestigate,
     listSampling, listSamplingDept,
     updateInvestigate,
-    updateSampling, uploadFile
+    updateSampling, uploadFile, uploadFileBase
   } from "../../api/authenticRight";
   import {getDeptList} from "../../api/biddingHall";
   import {Dialog} from "vant";
@@ -584,6 +588,8 @@
           params: null,
           samplingId: null,
           searchValue: null,
+          fileUrl1:[],
+          fileUrl2:[],
         },
         dhdcform:{
           callPhone: null,
@@ -619,7 +625,9 @@
         userId :null,
         nickName:null,
         currentValue:null,
-        fileList:[]
+        fileList:[],
+        fileList1:[],
+        fileList2:[],
       }
     },
     created(){
@@ -639,8 +647,6 @@
     },
     methods:{
       onOversize(file) {
-        console.log(file);
-        Toast('文件大小不能超过 16mb');
         this.$toast({
           icon: 'error', // 找到自己需要的图标
           message: '上传失败！文件大小不能超过 16m',
@@ -689,18 +695,79 @@
         }
         this.fileList = []
       },
-      /*afterRead(file) {
+      afterRead1(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", file.file);
-          uploadFile(data2).then(res => {
-            if(res.code == 200){
-              this.xcdcform.idcardCheckedBy = res.idcardCheckedBy
-              this.xcdcform.nameCheckedBy = res.nameCheckedBy
-              this.xcdcform["fileUrl"] = res.url
-            }
+          data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+          uploadFileBase(data2).then(res => {
+            this.xcdcform.fileUrl1=res.url
+           })
+        }
+      },
+      afterRead2(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 => {
+            this.xcdcform.fileUrl2=res.url
           })
-          this.fileList = []
-      },*/
+        }
+      },
+      remove(val){
+        if(val==1){
+          this.xcdcform.fileUrl1=""
+        }else {
+          this.xcdcform.fileUrl2=""
+        }
+      },
       changeFn(val) {
       },
       confirmFn(){
@@ -830,6 +897,8 @@
           samplingId: null,
           searchValue: null,
           updateBy: null,
+          fileUrl1: [],
+          fileUrl2: [],
         };
         this.dhdcform={
           countName: null,
@@ -857,6 +926,9 @@
           searchValue: null,
           updateBy: null,
         }
+        this.fileList = []
+        this.fileList1 = []
+        this.fileList2 = []
       },
       onClickRight() {
         this.show = true
@@ -929,7 +1001,6 @@
         }
       },
       selectType(val,data,index){
-        console.log(this.nickName,this.userId)
         if(val==1){
           let _this = this
           let a ={
@@ -957,6 +1028,16 @@
           getInvestigate(data.id).then(res => {
             if(res.data){
               this.xcdcform = res.data
+              if(this.xcdcform.fileUrl1){
+                this.fileList1.push({
+                  "url":this.xcdcform.fileUrl1
+                })
+              }
+              if(this.xcdcform.fileUrl2){
+                this.fileList2.push({
+                  "url":this.xcdcform.fileUrl2
+                })
+              }
               this.xcdcform["countName"] = data.countName
               this.xcdcform["townName"] = data.townName
               this.xcdcform["villageName"] = data.villageName