上传活动资料

<script>
export default {
  data() {
    return {
      dialogVisible3: false, // 控制弹窗的显示与隐藏
      urlList: [], // 上传文件列表
      showDoc: false, // 是否显示 doc 文件预览弹窗
      showPdf: false, // 是否显示 pdf 文件预览弹窗
      showImg: false, // 是否显示图片预览弹窗
      fileUrl: '', // doc 文件的预览链接
      pdfUrl: '', // pdf 文件的预览链接
      imagesUrl: '', // 图片的预览链接
      fileWidth: '800px', // 预览弹窗的宽度
    }
  },
  methods: {
    // 上传文件前的处理函数
    beforeAvatarUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error('上传文件大小不能超过 50MB!');
      }
      return isLt50M;
    },
    // 上传文件成功的回调函数
    success(response, file, fileList) {
      if (response.code === 200) {
        this.urlList.push({
          id: response.data.id,
          name: response.data.name,
          size: response.data.size,
          path: response.data.path
        });
      } else {
        this.$message.error(response.msg);
      }
    },
    // 点击删除按钮后的处理函数
    delList(id) {
      this.urlList = this.urlList.filter(item => item.id !== id);
    },
    // 显示文件预览弹窗的处理函数
    showFile(path) {
      const fileType = path.split('.').pop().toLowerCase();
      if (fileType === 'doc' || fileType === 'docx' || fileType === 'ppt' || fileType === 'pptx' || fileType === 'xls' || fileType === 'xlsx') {
        // 如果是 doc/ppt/xls 文件，使用 Office Online 预览
        this.fileUrl = encodeURIComponent(path);
        this.showDoc = true;
      } else if (fileType === 'pdf') {
        // 如果是 pdf 文件，使用 embed 标签预览
        this.pdfUrl = path;
        this.showPdf = true;
      } else if (/.(gif|jpg|jpeg|png)$/i.test(path)) {
        // 如果是图片文件，直接显示
        this.imagesUrl = path;
        this.showImg = true;
      } else {
        this.$message.warning('该文件类型暂不支持预览！');
      }
    },
    // 关闭预览弹窗的处理函数
    closePreviewClick(done) {
      this.showDoc = false;
      this.showPdf = false;
      this.showImg = false;
      done();
    },
    // 确定按钮点击事件的处理函数
    dataSruse() {
      // 确定上传文件到服务器
      this.dialogVisible3 = false;
    }
  }
}
</script>