hi-ucs/front/src/views/components/upload/index.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-09 15:41:19
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-17 11:15:33
 * @Description: 上传组件
-->
<template>
  <a-upload
    v-model:file-list="fileList"
    :action="`${apiURL}/upload`"
    list-type="picture"
    class="upload-list-inline"
    :maxCount="props.maxCount"
    :before-upload="beforeUpload"
    @change="handleChange"
    @preview="handlePreview"
    @remove="handleRemove"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      {{ props.btnName }}
    </a-button>
    <span
      style="
        display: inline-block;
        margin-left: 10px;
        color: #999999;
        font-size: 14px;
      "
    >
      {{ props.tip }}
    </span>
  </a-upload>
</template>
<script setup>
  import { ref, defineProps } from 'vue'
  // import { baseURL } from '@/config'
  import { message, Upload } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  const props = defineProps({
    btnName: { type: String, default: '' },
    type: { type: String, default: '' },
    tip: { type: String, default: '' },
    maxCount: { type: Number, default: 1 },
    data: { type: Array, default: null },
    list: { type: Array, default: null },
    emitFlag: { type: String, default: '' },
  })
  console.log('window.SITE_CONFIG.apiURL', window.SITE_CONFIG.apiURL)
  const apiURL = window.SITE_CONFIG.apiURL
  const fileList = ref([])
  if (props.list.length > 0) {
    fileList.value = JSON.parse(JSON.stringify(props.list))
  }
  const beforeUpload = (file) => {
    console.log(file)
    const isLt10M = file.size / 1024 / 1024 < 100
    let flag
    console.log(props.type)
    if (props.type === '图片') {
      flag =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
    } else if (props.type === '视频') {
      console.log(file.type === 'video/mp4')
      flag =
        file.type === 'audio/mpeg' ||
        file.type === 'video/mp4' ||
        file.type === 'video/mp3'
    } else if (props.type === '文件') {
      flag =
        file.type === 'application/pdf' ||
        file.type === 'application/msword' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    }
    console.log(flag)
    if (!flag) {
      message.error(`${file.name} 不是${props.type}类型`)
    }
    if (!isLt10M) {
      message.error(`${file.name} 超出100M的大小`)
    }
    return flag || Upload.LIST_IGNORE
  }
  const handlePreview = (file) => {
    // console.log(file)
    window.open(
      window.SITE_CONFIG.previewUrl +
        'hisense_office/onlinePreview?url=' +
        btoa(encodeURI(file.response.data))
    )
  }
  const handleChange = (info) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList)
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`)
      // eslint-disable-next-line vue/no-mutating-props
      props.data.note1 = info.file.response.data
      console.log(props.data, fileList.value)
      if (props.type === '图片') {
        if (!props.emitFlag) {
          mybus.emit('chageImgList', fileList.value)
        }
      } else if (props.type === '文件') {
        mybus.emit('chageFileList', fileList.value)
      } else if (props.type === '视频') {
        mybus.emit('chageVideoList', fileList.value)
      }
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`)
    }
  }
  const handleRemove = (file) => {
    console.log(file)
    // eslint-disable-next-line vue/no-mutating-props
    props.data.note1 = ''
  }
</script>
<style lang="less" scoped>
  .upload-list-inline {
    width: unset;
    button {
      height: 30px;
      width: 100px;
      border: 1px solid #bbd3ef;
      border-radius: 6px;
      background: #edf4fc;
      color: #0087ff;
      font-size: 14px;
    }
  }
</style>