bab-icon/resources/assets/js/components/FormImg.vue

<template>
  <!-- 图片上传 -->
  <div class="select-box-img" :class="isFlex?'selectFlex':''">
    <div class="select-title">
      <span :class="isRedDot?'':'isRedDot'">*</span>
      {{name}}
    </div>

    <div class="home">
      <div class="">
        <el-upload :class="{
            showUpload:fileList.length>=limit?true:false,
            borderRadius:uploadBorderRadius == '50%',
          }" action="" :multiple="limit>1" :accept="accept ? accept : '.jpg,.png,.jpeg,.gif'"
                   :list-type="listType?listType:'picture-card'" :limit='limit' :on-remove="handleRemove"
                   :http-request='httpRequest' :file-list="fileList" :disabled='disabled' :auto-upload="true">
          <el-button v-if="listType=='text'" size="small" type="primary">点击上传</el-button>
          <i v-else slot="default" class="el-icon-plus"></i>
        </el-upload>
      </div>

      <div v-show="showMsg" class="errorMsg">{{msg}}</div>
    </div>
  </div>
</template>

<script>
import {
  Loading
} from 'element-ui';
import oss from "ali-oss"
import {
  GetSts
} from '@/api/conmmon.js'
export default {
  props: ['name', 'isRedDot', 'isFlex', 'value', 'isCheck', 'createOss',
    'limit', 'witdh', 'dataType', 'listType', 'accept', 'disabled', 'uploadBorderRadius'
  ],
  data() {
    return {
      aliOss: '',
      msg: '',
      showMsg: false,
      showUpButton: false, //true隐藏 false显示上传按钮
      fileList: [],
      fileUrl: [],
    }
  },

  mounted() {
    console.log(this.value);
    if (this.value) {
      if (this.limit === 1) {
        this.fileList.push({
          url: this.value
        })
      } else {
        this.fileList = this.value
      }
    }
    this.setName(this.name)
    if (!this.createOss) {
      this.setNewOss()
    }
  },
  watch: {
    fileList(val) {
      this.verification()
    },
    value(val) {
      if (val) {
        if (typeof val === 'string') {
          let list = val.split(';');
          list.forEach((url) => {
            this.setFileUrl(url);
          })
        } else {
          val.forEach((url) => {
            if (typeof url === 'string') {
              this.setFileUrl(url);
            } else {
              this.setFileUrl(url.url);
            }
          })
        }
      }
    },
  },
  methods: {
    setFileUrl(url) {
      let isAdd = true;
      this.fileList.forEach((v, k) => {
        if (v.url === url) {
          isAdd = false;
        }
      })
      if (isAdd) {
        this.fileList.push({
          name: this.getFileName(url),
          url: url
        });
      }
      console.log(this.fileList);
    },
    getFileName(o) {
      let pos = o.lastIndexOf("\\");
      return o.substring(pos + 1);
    },

    async setNewOss() {
      let obj = await GetSts()
      obj = obj.data
      let client = new oss({
        region: "oss-cn-chengdu",
        accessKeyId: obj.AccessKeyId,
        accessKeySecret: obj.AccessKeySecret,
        stsToken: obj.SecurityToken,
        refreshSTSToken: async () => {
          let obj = await GetSts()
          obj = obj.data
          return {
            accessKeyId: obj.accessKeyId,
            accessKeySecret: obj.accessKeySecret,
            stsToken: obj.stsToken,
          }
        },
        refreshSTSTokenInterval: 900000,
        bucket: "jhnewshop",
      })
      this.aliOss = client
    },

    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileUrl.forEach((v, i) => {
        if (v == file.url) {
          this.fileUrl.splice(i, 1)
        }
      })
      this.fileList = fileList
    },

    httpRequest({
                  file
                }) {
      let imgName = `${Date.parse(new Date())}/${file.name}`
      Loading.service({
        lock: true,
        text: '图片上传中',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.aliOss.put(imgName, file).then((res) => {
        if (res.res && res.res.status == 200) {
          // console.log(`阿里云OSS上传文件成功回调`, res, url, name);
          Loading.service().close()
          this.popFun('成功', '上传成功', 'success')

          file.url = res.url;
          this.fileUrl.push(res.url)
          if (this.dataType === 1) {
            this.$emit('input', this.fileUrl)
          } else {
            this.$emit('input', this.fileUrl.join(';'))
          }
          console.log(this.fileList);
        }
      }).catch((err) => {
        Loading.service().close()
        this.popFun('提示', '上传失败', 'error')
      })
    },

    popFun(title, msg, type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },

    // 处理name结尾的冒号
    setName(name) {
      if (this.name) {
        if (name.indexOf('：') != -1) {
          this.title = name.substr(0, name.length - 1)
        } else {
          this.title = name
        }
      }
    },
    verification() {
      if (this.isCheck) {
        this.showMsg = true

        if (this.fileList.length < 1) {
          this.msg = "请上传图片";
          return false
        }
        this.showMsg = false
        return true
      } else {
        return true
      }
    },
    alertMsg() {
      if (this.isCheck) {
        if (this.verification) {
          this.$notify.error({
            title: '提示',
            message: this.msg
          });
        }
      }
    },
  },
}
</script>