图片显示优化

zhanghua

2022-11-29 8a5227c2e5a898004eda1f61180e076ec089fe85

 src/components/myUpload/index.vue

@@ -2,7 +2,11 @@
    <div class="my-upload">
      <div v-if="pictureList.length > 0" class="image-box">
        <div v-for="image in pictureList" class="image-box-item">
          <i v-if="isShowUpload" @click="handleDeletePicture(image)" class="el-icon-delete image-delete-icon"></i>
        <i
          v-if="isShowUpload"
          @click="handleDeletePicture(image)"
          class="el-icon-delete image-delete-icon"
        ></i>
          <el-image :key="image" class="image-content" :src="image" ></el-image>
        </div>
      </div>
@@ -17,7 +21,8 @@
        :on-success="handleSuccess"
        :on-error="handleError" 
        :list-type="listType"
        :headers="getToken()">
      :headers="getToken()"
    >
          <div class="upload-btn">
            <i class="el-icon-plus"></i>
            <span>上传图片</span>
@@ -38,67 +43,69 @@
            // 限制
            limit: 4,
            // 文件列表类型
            listType: 'picture-card'
      listType: "picture-card",
        };
    },
    methods: {
        // 上传之前回调
        beforeUpload(rawFile) {
            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
                this.$message.error('图片必须是 jpg/svg/jpeg/png 格式!')
                return false
      if (
        rawFile.type !== "image/png" &&
        rawFile.type !== "image/svg+xml" &&
        rawFile.type !== "image/jpg" &&
        rawFile.type !== "image/jpeg"
      ) {
        this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
        return false;
            } else if (rawFile.size / 1024 / 1024 > 5) {
                this.$message.error('上传图片不能超过 5MB!')
                return false
        this.$message.error("上传图片不能超过 5MB!");
        return false;
            }
            return true
      return true;
        },
        // 上传成功回调
        handleSuccess(res, file, filelist) {
            if(res.data.url1){
                this.$emit('setPictureUrl',{url:res.data.url1});
            }
            else if(res.data.url2){
                this.$emit('setPictureUrl',{url:res.data.url2});
            }
            else if(res.data.url3){
                this.$emit('setPictureUrl',{url:res.data.url3});
            }
            else{
                this.$emit('setPictureUrl',{url:res.data.url4});
        this.$emit("setPictureUrl", { url: res.data.url1 });
      } else if (res.data.url2) {
        this.$emit("setPictureUrl", { url: res.data.url2 });
      } else if (res.data.url3) {
        this.$emit("setPictureUrl", { url: res.data.url3 });
      } else {
        this.$emit("setPictureUrl", { url: res.data.url4 });
            }
        },
        // 上传失败回调
        handleError(err, file, fileList) {
            this.$message({
                type:'error',
                message:err
            })
        type: "error",
        message: err,
      });
        },
        // 获取token
        getToken() {
            const token = sessionStorage.getItem('token');
            const tokenHead = sessionStorage.getItem('tokenHead');
      const token = sessionStorage.getItem("token");
      const tokenHead = sessionStorage.getItem("tokenHead");
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
        return { Authorization: tokenHead + token };
            }
        },

        handleDeletePicture(imageUrl) {
          this.$emit('delPictureUrl', { url: imageUrl });
        }
      this.$emit("delPictureUrl", { url: imageUrl });
    },
    },
    props: {
      pictureList: {
        type: Array,
        default: () => []
      default: () => [],
      },
      isShowUpload: {
        type: Boolean,
        default: () => true
      }
      default: () => true,
    },
}
  },
};
</script>
<style lang="scss" scoped>
.my-upload {
@@ -131,6 +138,7 @@
  }
  .image-box {
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    margin: 0 10px;

@@ -144,10 +152,12 @@
      left: calc(100% - 50px);
      opacity: 0;
    }

    .image-box-item {
      padding: 0px 10px;
    }
    .image-box-item:hover {
      color: #ffffff;
      opacity: .5;
      opacity: 0.5;
      .image-delete-icon {
        z-index: 2;
        opacity: 1;