身份证正反面调整

odc.xiaohui

2023-03-08 d24c9dde20cba23b96082b4db81b5223c75e4ea9

 src/components/myUpload/index.vue

@@ -1,14 +1,17 @@
<template>
  <div class="my-upload">
    <div v-if="pictureList.length > 0" class="image-box">
      <div v-for="image in pictureList" class="image-box-item">
      <div v-for="image in pictureList" :class="{ 'image-box-item': true, 'image-box-item-cover': isShowUpload }">
        <span v-if="isShowUpload" @click="handleDeletePicture(image)" class="image-delete-icon el-icon-delete"></span>
        <el-image :key="image" class="image-content" :src="image"></el-image>
        <el-image :key="image" class="image-content" :src="image"  :preview-src-list="[image]"></el-image>
      </div>
    </div>
    <el-upload
      v-if="isShowUpload && pictureList.length < limit"
      :file-list="fileList"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      action=""
      :multiple="multiple"
      :show-file-list="flag"
@@ -79,18 +82,12 @@
          .then(({ url1, url2, url3, url4 }) => {
            const url = url1 ?? url2 ?? url3 ?? url4;
            this.$emit('setPictureUrl', { url: url });
            this.loading = false;
          })
          .catch(err => {
            this.loading = false;
            this.$message.error(err);
          })
    },
    // 获取token
    getToken() {
      const token = sessionStorage.getItem("token");
      const tokenHead = sessionStorage.getItem("tokenHead");
      if (token && tokenHead) {
        return { Authorization: tokenHead + token };
      }
    },

    handleDeletePicture(imageUrl) {
@@ -157,9 +154,10 @@

    .image-box-item {
      position: sticky;
      margin: 0 10px;
    }

    .image-box-item:hover {
    .image-box-item-cover:hover {
      .image-content {
        box-shadow: #ffffff;
        opacity: 0.5;