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>