已上报到市批量操作按钮隐藏

fangyuan

2022-12-16 9ff66017debadfc89bc0c1b796684a4d1dbe2bc3

 src/components/myUpload/index.vue

@@ -1,27 +1,25 @@
<template>
  <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>
      <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>
      </div>
    </div>
    <el-upload
      v-if="isShowUpload"
      v-if="isShowUpload && pictureList.length < limit"
      :file-list="fileList"
      action="/sccg/file/medias"
      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"
      :before-upload="beforeUpload"
      :limit="limit"
      :on-success="handleSuccess"
      :on-error="handleError"
      :list-type="listType"
      :headers="getToken()"
      :auto-upload="true"
      :http-request="handleUpload"
      style="margin-left: 14px;"
    >
      <div class="upload-btn">
        <i class="el-icon-plus"></i>
@@ -31,6 +29,8 @@
  </div>
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";

export default {
  data() {
    return {
@@ -44,51 +44,50 @@
      limit: 4,
      // 文件列表类型
      listType: "picture-card",
      loading: false
    };
  },
  methods: {
    // 上传之前回调
    beforeUpload(rawFile) {
    // 验证上传文件
    validateFile(file) {
      if (
        rawFile.type !== "image/png" &&
        rawFile.type !== "image/svg+xml" &&
        rawFile.type !== "image/jpg" &&
        rawFile.type !== "image/jpeg"
          file.type !== "image/png" &&
          file.type !== "image/svg+xml" &&
          file.type !== "image/jpg" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 5) {
        this.loading = false;
        return  false;
      }

      if (file.size / 1024 / 1024 > 5) {
        this.$message.error("上传图片不能超过 5MB!");
        this.loading = false;
        return false;
      }
      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 });

    handleUpload(data) {
      this.loading = true;
      const { file } = data;
      const validate = this.validateFile(file);
      if (!validate) {
        return;
      }
    },
    // 上传失败回调
    handleError(err, file, fileList) {
      this.$message({
        type: "error",
        message: err,
      });
    },
    // 获取token
    getToken() {
      const token = sessionStorage.getItem("token");
      const tokenHead = sessionStorage.getItem("tokenHead");
      if (token && tokenHead) {
        return { Authorization: tokenHead + token };
      }
      const formData = new FormData();
      formData.append('file', file);
      imageManagement.importImage(formData)
          .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);
          })
    },

    handleDeletePicture(imageUrl) {
@@ -140,27 +139,36 @@
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    margin: 0 10px;

    .image-content {
      width: 100px;
      height: 100px;
    }

    .image-delete-icon {
      position: relative;
      bottom: calc(100% - 50px);
      left: calc(100% - 50px);
      position: absolute;
      top: 45px;
      left: 45px;
      opacity: 0;
    }

    .image-box-item {
      padding: 0px 10px;
      position: sticky;
      margin: 0 10px;
    }
    .image-box-item:hover {
      color: #ffffff;
      opacity: 0.5;

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

      .image-delete-icon {
        color: red;
        font-size: 14px;
        z-index: 2;
        opacity: 1;
        cursor: pointer;
      }
    }
  }