上传活动资料

<script>
export default {
  data() {
    return {
      dialogVisible3: false, // 上传文件弹窗是否显示
      urlList: [], // 文件列表
      showDoc: false, // 是否显示doc文件预览
      showPdf: false, // 是否显示pdf文件预览
      showImg: false, // 是否显示图片文件预览
      fileWidth: '800px', // 文件预览弹窗的宽度
      fileUrl: '', // doc文件的链接
      pdfUrl: '', // pdf文件的链接
      imagesUrl: '' // 图片文件的链接
    }
  },
  methods: {
    success(response, file, fileList) {
      // 上传成功的回调函数
      if (response.code === 200) {
        this.urlList.push({
          id: response.data.id,
          name: file.name,
          size: this.formatFileSize(file.size),
          path: response.data.path
        })
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeAvatarUpload(file) {
      // 上传前的校验函数
      const isLt50M = file.size / 1024 / 1024 < 50
      const fileType = this.getFileType(file.name)
      if (!isLt50M) {
        this.$message.error('上传文件大小不能超过 50MB!')
      }
      if (!fileType) {
        this.$message.error('上传文件格式不正确，请上传doc、docx、ppt、pptx、xls、xlsx、pdf格式的文件!')
      }
      return isLt50M && fileType
    },
    getFileType(fileName) {
      // 获取文件类型
      const suffix = fileName.split('.').pop().toLowerCase()
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf']
      return typeArr.includes(suffix)
    },
    formatFileSize(size) {
      // 格式化文件大小
      if (size > 1024 * 1024) {
        size = (size / 1024 / 1024).toFixed(2) + 'MB'
      } else if (size > 1024) {
        size = (size / 1024).toFixed(2) + 'KB'
      } else {
        size = size.toFixed(2) + 'B'
      }
      return size
    },
    delList(id) {
      // 删除上传的文件
      const index = this.urlList.findIndex(item => item.id === id)
      if (index > -1) {
        this.urlList.splice(index, 1)
      }
    },
    showFile(path) {
      // 预览上传的文件
      const fileType = this.getFileType(path)
      if (fileType === 'pdf') {
        this.showPdf = true
        this.pdfUrl = path
      } else if (fileType === 'doc' || fileType === 'docx' || fileType === 'ppt' || fileType === 'pptx' || fileType === 'xls' || fileType === 'xlsx') {
        this.showDoc = true
        this.fileUrl = path
      } else {
        this.showImg = true
        this.imagesUrl = path
      }
    },
    closePreviewClick(done) {
      // 关闭文件预览弹窗
      this.showDoc = false
      this.showPdf = false
      this.showImg = false
      done()
    },
    dataSruse() {
      // 确定上传文件
      const urlArr = []
      this.urlList.map(item => {
        urlArr.push(item.path)
      })
      this.$emit('getUrlList', urlArr)
      this.dialogVisible3 = false
    }
  }
}
</script>