提交图片压缩

扫码企业不存在页面
2 years ago · 55d0e1d6a5
9 changed files with 139 additions and 11 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@zxing/library": "^0.20.0",
        "axios": "^1.6.7",
+        "compressorjs": "^1.2.1",
        "core-js": "^3.36.0",
        "crypto-js": "^4.2.0",
        "date-fns": "^3.6.0",
@ -4107,6 +4108,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "peer": true
    },
+    "node_modules/blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "node_modules/bn.js": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@ -4658,6 +4664,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "dependencies": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -6544,6 +6559,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@ -14909,6 +14935,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "peer": true
    },
+    "blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "bn.js": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@ -15351,6 +15382,15 @@
      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
      "peer": true
    },
+    "compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -16843,6 +16883,11 @@
        "binary-extensions": "^2.0.0"
      }
    },
+    "is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+    },
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
  "dependencies": {
    "@zxing/library": "^0.20.0",
    "axios": "^1.6.7",
+    "compressorjs": "^1.2.1",
    "core-js": "^3.36.0",
    "crypto-js": "^4.2.0",
    "date-fns": "^3.6.0",
--- a/src/api/enterprise.js
+++ b/src/api/enterprise.js
@ -71,3 +71,13 @@ export const queryQZAJList = (enterpriseNumber, success, error) =>_get("/app/xzj
 * @returns 
 */
 export const queryCFAJList = (enterpriseNumber, success, error) =>_get("/app/xzjcjbxx/queryCFAJList/" + enterpriseNumber,null,success, error)
+/**
+ *  查询企业是否存在
+ * @param {*} enterpriseNumber 企业统一信用代码
+ * @param {*} success 
+ * @param {*} error 
+ * @returns 
+ */
+export const checkIsExists = (enterpriseNumber, success, error) =>_get("/app/enterpriseInformation/checkIsExists/" + enterpriseNumber,null,success, error)
+
+
--- a/src/router/enforce.js
+++ b/src/router/enforce.js
@ -41,6 +41,12 @@ const routes = [
    name: "pdfView",
    component: () => import("@/views/common/pdfvVew.vue"),
  },
+  // 企业不存在提示页面
+  {
+    path: "/notExist",
+    name: "notExist",
+    component: () => import("@/views/notExist.vue"),
+  },
 ];

 export { routes };
--- a/src/util/fileUpload.js
+++ b/src/util/fileUpload.js
@ -3,13 +3,13 @@ import { baseUrl } from "../config/env";
 import axios from 'axios';

 const uploadFile = (files,callback) => {
-  files.status = "uploading";
-  files.message = "上传中...";
-  files.status = "uploading";
-      files.message = "上传中...";
+  // files.status = "uploading";
+  // files.message = "上传中...";
+  // files.status = "uploading";
+  //     files.message = "上传中...";
      // 需要使用 FormData 进行文件上传
      let form = new FormData();
-      form.append("file", files.file);
+      form.append("file", files);
      axios({
        method: "post",
        url:  baseUrl+ "/common/upload",
--- a/src/views/enforce/scanPage_szy.vue
+++ b/src/views/enforce/scanPage_szy.vue
@ -17,6 +17,7 @@
 import Vconsole from "vconsole";
 import { BrowserMultiFormatReader } from "@zxing/library";
 import {szyptGetToken} from '../../api/Home';
+import {checkIsExists} from '@/api/enterprise';
 import wx from 'weixin-js-sdk';
 export default {
  name: "QrCodeSearch",
@ -81,11 +82,22 @@ export default {
          // 页面跳转
          console.log("=========== 扫码返回 ===========")
          console.log(res)
-          this.$router.push({
-            path:"/enterpriseScanPreview",
-            query:{
-              enterpriseNumber: res.resultStr
+          checkIsExists(res,success=>{
+            console.log(success.data)
+            if(success.data){
+              this.$router.push({
+                path:"/enterpriseScanPreview",
+                query:{
+                  enterpriseNumber: res.resultStr
+                }
+              })
+            }else{
+              this.$router.push({
+                  path:"/notExist",
+              })
            }
+          },error =>{
+            
          })
        },
        cancel: (res) => {
--- a/src/views/enforce/sign.vue
+++ b/src/views/enforce/sign.vue
@ -114,6 +114,7 @@
                        <div class="file-upload-center">
                            <label>上传附件</label> <span>(不多于9张)</span>
                        </div>
+                        <!-- :after-read="uploadFiles" -->
                        <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9" :after-read="uploadFiles" :before-delete="deleteFile">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
@ -180,6 +181,7 @@ import {getEnterpriseInformation} from '../../api/enterprise'
 import { reactive, ref } from "vue";
 import {uploadFile} from "../../util/fileUpload";
 import {formattedTime} from "@/util/util";
+import Compressor from 'compressorjs'
 //用户筛选弹窗
 import Popup from './userFilter.vue';
 import PopupA from './assistUserFilter.vue';
@ -211,6 +213,7 @@ const data = reactive({
    item_columns: [],
    isNoScan: false,
 });
+var fileSize = 0;
 //保存参数
 const submitData = reactive({
    // id
@ -476,6 +479,49 @@ const reciveData2 = (item) =>{
    submitData.subsidiaryerText = item.userName;
 }

+const beforeRead = (file) =>{
+      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {
+        // Toast('请上传图片格式');
+        return false;
+      }
+      // if(file.size<1024*1024*2){
+      //   console.log('图片大小1',file.size)
+      //   // Toast('请上传2M以上图片');
+      //   return false;
+      // }
+      if(file.size>1024*1024*1.3){
+        console.log('图片大小2',file.size)
+        // Toast('请上传20M以下图片');
+        let that = this
+        console.log('aaaaaaaaaaaaaaaaaaaaaaa',file)
+        return new Promise((resolve) => {
+          // compressorjs 默认开启 checkOrientation 选项
+          // 会将图片修正为正确方向
+          new Compressor(file, {
+            quality: 0.1,
+            success(result){
+              let file1 = new File([result], file.name, { type: file.type })
+              console.log("File对象", file1);
+              console.log("File对象", file1.size);
+              // uploadFile(file1)
+              uploadFile(file1,(res) =>{
+                  submitData.fileList.push(res.url)
+              });
+              resolve(result);
+            },
+            error(err) {
+              console.log(err.message);
+            },
+          });
+        });
+      }
+      console.log('图片大小3',file.size)
+      // uploadFile(file)
+      uploadFile(file,(res) =>{
+        submitData.fileList.push(res.url)
+      });
+      return true;
+    }
 </script>

 <style lang="less" scoped>
--- a/src/views/enforceHome.vue
+++ b/src/views/enforceHome.vue
@ -10,8 +10,8 @@
      <div class="logobox"></div>
      <div class="streamer" @click="" >
        <i></i>
-        <span class="marquee">
-          <span class="scroll-text"  v-for="(item, index) in carouselList" >{{ item.planName }}</span>
+        <span class="marquee" :key="freshMap.key">
+          <span class="scroll-text"   v-for="(item, index) in carouselList" >{{ item.planName }}</span>
        </span>

      </div>
@ -68,7 +68,9 @@ let freshMap = reactive({
 	refreshLoad: false, // 是否刷新
 	listLoading: false, // 是否加载中
 	listFinished: false, // 是否加载完成标识
+  key: 0,
 });
+
 const data = reactive({});
 const adviceList = reactive([]);
 const boutiqueAttr = reactive({
@ -128,6 +130,7 @@ const queryList = () =>{
    }else{
      carouselList = success.data; 
    }
+    freshMap.key = 1
    console.log(carouselList)
  },error =>{

--- a/src/views/notExist.vue
+++ b/src/views/notExist.vue
@ -0,0 +1,5 @@
+<template>
+  <div>
+    <van-empty description="二维码过期或企业信息不存在！" />
+  </div>
+</template>