身份证正面，文件上传采用el-upload

src/views/index/driverAdd.vue

@@ -16,29 +16,28 @@
       <img class="startImg" src="@/assets/start.png" />
       <span>身份证正面</span>
     </div>
-<!--    <el-upload
+    <van-image style="width: 54px;height: 54px;" class="camerImg" v-if="identityCardFront" :src="identityCardFront" />
+    <el-upload
+        v-else
         :action="baseURL + '/order/uploadImage'"
         :headers='authorization'
         accept=".png,.jpg,.jpeg,.zip,.rar,.xlsx,.xsavels,.pdf,.PDF,.doc,.docx"
         :on-success="changeHandle"
-        :before-upload="beforeAvatarUpload"
+        :before-upload="checkImgType"
-        class="avatar-uploader"
+        class="upload-demo"
         :show-file-list="false"
-
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
     >
-      <el-button slot="default" style="margin: 15px" size="mini" type="primary"
+      <van-icon  slot="default" name="plus" style="font-size: 54px" />
-                 class="add">
+    </el-upload>
-        点击上传
+<!--    <van-uploader
-      </el-button>
-    </el-upload>-->
-    <van-uploader
         v-model="identityCardFrontList"
         :after-read="identityCardFrontHandler"
         :max-count="1"
-        capture="camera"
         :preview-size="54"
         accept="image/png, image/jpeg"
-    />
+    />-->
   </div>
   <div class="lineBot"></div>
   <div class="itemContent">
@@ -154,6 +153,8 @@ import {saveDriver, uploadImage, ocrHandler} from "@/api/mine"
 import TwoCommonBtn from "@/components/twoBtnCommon.vue"
 import CellGroup  from "@/components/cellGroup.vue"
 import {formatDate1} from "@/utils/common"
+import {ImagePreview} from "vant";
+
 export default {
   name: "driverAdd",
   mixins:[myMixins],
@@ -187,9 +188,8 @@ export default {
       idCardValidStartTime:'',
       idCardValidEndTime:'',
       authorization:{Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MjY4MDk4MTQsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiLkuIrmtbfmtYvor5XkvpvlupTllYYiLCJzdXBwbGllcklkIjozMzA0MSwic3VwcGxpZXJUeXBlIjoyLCJ1c2VybmFtZSI6InNvbmciLCJ1c2VyVHlwZSI6InJlc2N1ZUFwcCIsImRldmljZUlkIjoiMTkwZTM1ZjdlMTRhYzdjMDAwNyIsImF1dGhvcml0aWVzIjpbXX0sInNjb3BlIjpbImFsbCJdLCJpc3MiOiJodHRwczovL3Npbm9hc3Npc3QuY29tIiwiZXhwIjoxNzI2ODk2MjE0LCJpYXQiOjE3MjY4MDk4MTR9.5KTAMXZf8ll6HS4Z49YJQ1HiRvHr79Q1goDAGEtsBmY'},
-      fileList:'',
+      // authorization:{Authorization:''},
-      file:'',
+      }
-    }
   },
   mounted() {
     if (window.location.href.includes('www.sinoassist.com')) {
@@ -201,8 +201,8 @@ export default {
       this.baseURL = 'http://localhost:8080'
 
     }
-    // this.authorization={Authorization: localStorage.getItem('token')}
+    let token=localStorage.getItem('token')
-    // this.requestPermissions();
+    this.authorization.Authorization=token;
     this.id = this.$route.params?.id;
     this.driverName = this.$route.params?.name;
     this.driverPhone = this.$route.params?.phone;
@@ -243,35 +243,45 @@ export default {
 
   },
   methods:{
- /*   requestPermissions() {
-      // 请求访问摄像头的权限
-      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia({ video: true })
-            .then(() => {
-              console.log('Camera permission granted');
-            })
-            .catch((error) => {
-              console.error('Camera permission denied:', error);
-            });
-      }
-    },*/
     isUse(e){
       this.states=e
     },
-  /*  beforeAvatarUpload(file){
+    checkImgType(file) {
-      this.licenseOcrInfo= file
+      const FileExt = file.name.replace(/.+\./, "");
+      const isLt5M = file.size / 1024 / 1024 < 5;
+      const whiteList = ['png', 'jpeg', 'jpg'];
+      if (whiteList.indexOf(FileExt.toLowerCase()) === -1) {
+        this.$message.error("请上传正确的文件格式:" + whiteList.join('、'))
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传图片大小不能超过 5MB!');
+        return false
+      }
     },
-    async changeHandle() {
+    handleRemove(file, fileList) {
-
+      console.log(file, fileList);
-      const formData = new FormData()
+      this.identityCardFront = ''
-      formData.append('file', this.licenseOcrInfo);
+    },
-     /!* await this.$post(this.$api.supplier.supplierApproval.recognizeBusinessLicense, formData).then((res) => {
+    handlePreview(file) {
-
+      ImagePreview({
-
+        images: this.identityCardFront,
-      });*!/
+        startPosition: 1,
-    },*/
+        closeable: true,
-    beforeRead(){
+      });
-      console.log("-----------")
+      console.log(file);
+    },
+    async changeHandle(response) {
+      if (response.success === true) {
+        this.$toast('上传成功')
+        // this.form.identityCardFront = response.data;
+        // await this.ocrFrontHandler()
+        this.identityCardFront = response.data;
+        console.log("this.identityCardFront",this.identityCardFront)
+        await this.idCardOcrHandler();
+      } else {
+        this.$toast('上传失败')
+      }
     },
     async identityCardFrontHandler(file, detail) {    // 上传身份证正面照片
       console.log("检查文件类型",file, detail)