erp/resources/frontend/src/components/upload/index.vue

<!--
 * @Description:头像上传组件
 * @Author: czw (725551805@qq.com)
 * @Date: 2022-03-03 18:50:30
 * @LastEditors: czw (725551805@qq.com)
 * @LastEditTime: 2022-03-14 09:14:24
 * @FilePath: /glxt/src/views/home/home/index.vue
-->
<template>
  <div>
    <el-upload
      name="image"
      :action="uploadAction"
      :headers="uploadHeaders"
      :on-preview="handleChange"
      :on-remove="beforeRemove"
      :on-success="good"
      :file-list="img"
      :limit="number"
      :before-upload="handleBeforeUpload"
      :on-change="handleEditChange"
      accept=".png,.jpg"
      list-type="picture-card"
      :class="hideUploadEdit ? 'hide' : ''"
      :show-file-list="true"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <div class="demo-image__preview" v-if="imageUrl">
      <el-image
        class="hidden__el-image"
        ref="elImage"
        :src="imageUrl"
        :preview-src-list="previewSrcList"
      >
      </el-image>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/util/auth";
export default {
  name: "", // 页面名称
  components: {}, // 挂载组件
  props: {
    // 上传图片数量
    number: {
      type: Number,
      default: 1,
    },
    file: {
      type: Array,
      default: () => [],
    },
  }, // 组件传值
  data() {
    return {
      hideUploadEdit: false, // 判断显示图片上传限制隐藏
      url: "/api/upload", // 请求接口
      imageUrl: "", // 图片展示
      previewSrcList: [], // 展示图片列表
      list: [], // 上传图片列表
      img: [], // 实际展示的图片
    };
  },
  computed: {
    // 上传的地址
    uploadAction() {
      return "https://ct-upimg.yx090.com" + this.url;
    },
    // 设置上传的请求头部
    uploadHeaders() {
      return {
        // authorization: 'Bearer' + getToken(),
        "Content-Type": "multipart/form-data",
      };
    },
  }, // 计算机属性 类似与data概念
  watch: {
    file: {
      handler(val) {
        if (val) {
          // console.log(val, 'ppp')
          var imges = [];
          val.forEach((element) => {
            imges = element.url.split(",");
            this.list = imges;
          });
          imges.forEach((element) => {
            this.img.push({ url: this.computedGetPictureSrc(element) });
          });
          const previewSrcList = imges.map((ele) => {
            return this.computedGetPictureSrc(ele);
          });
          this.previewSrcList = previewSrcList;
          if (val.length === this.number) {
            this.hideUploadEdit = true;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  }, // 监控data中数据变化
  methods: {
    computedGetPictureSrc(src) {
      return "https://ct-upimg.yx090.com/" + src;
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 判断显示图片上传限制隐藏
     * @param {*} file
     * @param {*} fileList
     * @return {*}
     * @Date: 2022-03-03 21:16:54
     */
    handleEditChange(file, fileList) {
      if (fileList.length === this.number) {
        this.hideUploadEdit = true;
      }
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 上传成功
     * @param {*}
     * @return {*}
     * @Date: 2022-03-03 19:59:45
     */
    good(file, fileList) {
      this.previewSrcList.push(fileList.url);
      console.log(this.previewSrcList, "------");
      // file.data.forEach((element) => {
      //   this.list.push(element.url)
      // })

      this.$emit("urlimg", fileList.url);
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 点击放大
     * @param {*}
     * @return {*}
     * @Date: 2022-03-03 18:59:28
     */
    handleChange(file) {
      this.imageUrl = file.url;
      this.$nextTick(() => {
        this.$refs.elImage.clickHandler();
      });
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description:删除
     * @param {*}
     * @return {*}
     * @Date: 2022-03-03 18:59:40
     */
    beforeRemove(file, fileList) {
      if (fileList.length === this.number) {
        this.hideUploadEdit = true;
      } else {
        this.hideUploadEdit = false;
      }
      if (file.response) {
        file.response.data.forEach((element) => {
          for (var i = 0; i < this.list.length; i++) {
            if (element.url === this.list[i]) {
              this.list.splice(i, 1);
            }
          }
        });
      } else {
        console.log(file, "iiii");
        for (var i = 0; i < this.list.length; i++) {
          if (file.url === this.computedGetPictureSrc(this.list[i])) {
            this.list.splice(i, 1);
          }
        }
      }
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description:自动删除
     * @param {*}
     * @return {*}
     * @Date: 2022-03-03 19:53:25
     */
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
    },
  }, // 挂载一些方法
};
</script>

<style lang="scss">
.demo-image__preview {
  height: 0;
}
.hidden__el-image {
  width: 0;
  height: 0;
  ::v-deep .el-image__preview {
    display: none;
  }
}
.hide .el-upload--picture-card {
  display: none;
}
</style>