bug修改

zhanghua

2023-04-14 ad88a6c7badd36789a851c34bdca8e0d0dc30dfb

bug修改

 src/components/myUpload/index.vue

@@ -1,185 +1,202 @@
<template>
  <div class="my-upload">
    <div v-if="pictureList.length > 0" class="image-box">
      <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"  :preview-src-list="[image]"></el-image>
      </div>
    <div class="my-upload">
        <div v-if="pictureList.length > 0" class="image-box">
            <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"
                    :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"
            :limit="limit"
            :list-type="listType"
            :auto-upload="true"
            :http-request="handleUpload"
            style="margin-left: 14px"
        >
            <div class="upload-btn">
                <i class="el-icon-plus"></i>
                <span>上传图片</span>
            </div>
        </el-upload>
    </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"
      :limit="limit"
      :list-type="listType"
      :auto-upload="true"
      :http-request="handleUpload"
      style="margin-left: 14px;"
    >
      <div class="upload-btn">
        <i class="el-icon-plus"></i>
        <span>上传图片</span>
      </div>
    </el-upload>
  </div>
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";

export default {
  data() {
    return {
      // 文件列表
      fileList: [],
      // 是否显示文件列表
      flag: false,
      // 多选
      multiple: false,
      // 限制
      limit: 4,
      // 文件列表类型
      listType: "picture-card",
      loading: false
    };
  },
  methods: {
    // 验证上传文件
    validateFile(file) {
      if (
          file.type !== "image/png" &&
          file.type !== "image/svg+xml" &&
          file.type !== "image/jpg" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
        this.loading = false;
        return  false;
      }
    data() {
        return {
            // 文件列表
            fileList: [],
            // 是否显示文件列表
            flag: false,
            // 多选
            multiple: false,
            // 限制
            limit: 4,
            // 文件列表类型
            listType: "picture-card",
            loading: false
        };
    },
    methods: {
        // 验证上传文件
        validateFile(file) {
            if (
                file.type !== "image/png" &&
                file.type !== "image/svg+xml" &&
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg"
            ) {
                this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
                this.loading = false;
                return false;
            }

      if (file.size / 1024 / 1024 > 5) {
        this.$message.error("上传图片不能超过 5MB!");
        this.loading = false;
        return false;
      }
      return true;
    },
            if (file.size / 1024 / 1024 > 5) {
                this.$message.error("上传图片不能超过 5MB!");
                this.loading = false;
                return false;
            }
            return true;
        },

    handleUpload(data) {
      this.loading = true;
      const { file } = data;
      const validate = this.validateFile(file);
      if (!validate) {
        return;
      }
      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);
          })
    },
        handleUpload(data) {
            this.loading = true;
            const { file } = data;
            const validate = this.validateFile(file);
            if (!validate) {
                return;
            }
            const formData = new FormData();
            formData.append('file', file);
            imageManagement.importImage(formData)
                .then((url) => {
                    // .then(({ url1, url2, url3, url4 }) => {
                    //   debugger
                    //   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) {
      this.$emit("delPictureUrl", { url: imageUrl });
        handleDeletePicture(imageUrl) {
            this.$emit("delPictureUrl", { url: imageUrl });
        },
    },
  },
  props: {
    pictureList: {
      type: Array,
      default: () => [],
    props: {
        pictureList: {
            type: Array,
            default: () => [],
        },
        isShowUpload: {
            type: Boolean,
            default: () => true,
        },
    },
    isShowUpload: {
      type: Boolean,
      default: () => true,
    },
  },
};
</script>
<style lang="scss" scoped>
.my-upload {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-right: 5px;

  .upload-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-right: 5px;

    &:hover i {
      color: #409eff;
    .upload-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        width: 100px;
        height: 100px;

        &:hover i {
            color: #409eff;
        }

        i {
            font-size: 30px;
            font-weight: 650;
        }

        span {
            line-height: 22px;
        }
    }
    .image-box {
        display: flex;
        flex-wrap: wrap;
        height: 100px;

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

        .image-delete-icon {
            position: absolute;
            top: 45px;
            left: 45px;
            opacity: 0;
        }

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

        .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;
            }
        }
    }

    i {
      font-size: 30px;
      font-weight: 650;
    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
    }

    span {
      line-height: 22px;
    :deep(.el-upload-list__item) {
        width: 100px;
        height: 100px;
    }
  }
  .image-box {
    display: flex;
    flex-wrap: wrap;
    height: 100px;

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

    .image-delete-icon {
      position: absolute;
      top: 45px;
      left: 45px;
      opacity: 0;
    }

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

    .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;
      }
    }
  }

  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
  }
  :deep(.el-upload-list__item) {
    width: 100px;
    height: 100px;
  }
}
</style>

 src/views/operate/images/updateUser/index.vue

@@ -163,6 +163,7 @@
      });
    },
    setPictureUrl({ url }) {
      debugger
      this.imageList.push(`${FILE_ORIGINAL_URL}${url}`);
      this.imagedata.url = this.imageList.join(",");
    },