确权调查移动端

src/components/uploader/uploader.vue

@@ -0,0 +1,186 @@
+<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

@@ -113,7 +113,7 @@
           :rules="[{ required: true, message: '请填写被核查人姓名' }]"
         >
           <template #button>
-           <van-uploader :after-read="afterRead" v-model="fileList" :max-size="4 * 1024 * 1024" @oversize="onOversize" :preview-image="false" :max-count="1" capture="camera"  accept="image/*">
+           <van-uploader :after-read="afterRead" v-model="fileList" :max-size="1024 * 1024 * 16" @oversize="onOversize" :preview-image="false" :max-count="1" :accept="'image/*'" capture="camera">
               <van-button icon="photograph" type="primary" size="mini">扫描身份证</van-button>
             </van-uploader>
           </template>
@@ -638,27 +638,69 @@
 
     },
     methods:{
-      onOversize(){
+      onOversize(file) {
+        console.log(file);
+        Toast('文件大小不能超过 16mb');
         this.$toast({
           icon: 'error', // 找到自己需要的图标
-          message: '文件大小超过4MB，上传失败',
+          message: '上传失败！文件大小不能超过 16m',
           duration:"1000",
-          onClose:function(){
-          }
         })
       },
-      afterRead(file) {
-        const data = new FormData();
-        data.append("file", this.fileList[0].file);
-        uploadFile(data).then(res => {
-          if(res.code == 200){
-            this.xcdcform.idcardCheckedBy = res.idcardCheckedBy
-            this.xcdcform.nameCheckedBy = res.nameCheckedBy
-            this.xcdcform["fileUrl"] = res.url
+      afterRead(file){
+        // 创建Canvas对象(画布)
+        let canvas =  document.createElement('canvas')
+        // 获取对应的CanvasRenderingContext2D对象(画笔)
+        let context = canvas.getContext('2d')
+        // 创建新的图片对象
+        let img = new Image()
+        // 指定图片的DataURL(图片的base64编码数据)
+        img.src = file.content
+        // 监听浏览器加载图片完成，然后进行进行绘制
+        const height = 166
+        const width = 316
+        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'}));
+          uploadFile(data2).then(res => {
+            if(res.code == 200){
+              this.xcdcform.idcardCheckedBy = res.idcardCheckedBy
+              this.xcdcform.nameCheckedBy = res.nameCheckedBy
+              this.xcdcform["fileUrl"] = res.url
+            }
+          })
+          this.fileList = []
+        }
         this.fileList = []
       },
+      /*afterRead(file) {
+          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
+            }
+          })
+          this.fileList = []
+      },*/
       changeFn(val) {
       },
       confirmFn(){