上传活动资料

<script>
  export default {
    data() {
      return {
        dialogVisible3: false, // 控制上传弹窗是否显示
        urlList: [], // 上传文件列表
        showDoc: false, // 是否显示 doc 文件预览弹窗
        showPdf: false, // 是否显示 pdf 文件预览弹窗
        showImg: false, // 是否显示图片预览弹窗
        fileWidth: '65%', // 文件预览弹窗宽度
        fileUrl: '', // doc 文件预览链接
        pdfUrl: '', // pdf 文件预览链接
        imagesUrl: '', // 图片预览链接
      }
    },
    methods: {
      // 上传前的钩子函数，限制上传文件大小和类型
      beforeAvatarUpload(file) {
        const isLt50M = file.size / 1024 / 1024 < 50;
        const typeList = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'];
        const name = file.name.split('.');
        const type = name[name.length - 1];
        const isType = typeList.indexOf(type) > -1;
        if (!isType) {
          this.$message.error('文件类型只能是doc、docx、ppt、pptx、xls、xlsx、pdf！');
        }
        if (!isLt50M) {
          this.$message.error('上传文件大小不能超过 50MB!');
        }
        return isLt50M && isType;
      },
      // 上传文件成功后的回调函数，将文件信息添加到上传列表里
      success(res, file) {
        const { id, path, name, size } = res.data;
        this.urlList.push({ id, path, name, size });
      },
      // 删除上传文件列表里的一项
      delList(id) {
        const index = this.urlList.findIndex(item => item.id === id);
        this.urlList.splice(index, 1);
      },
      // 点击预览按钮，弹出文件预览弹窗
      showFile(path) {
        const typeList = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'];
        const name = path.split('.');
        const type = name[name.length - 1];
        if (typeList.indexOf(type) > -1) {
          this.fileUrl = path;
          this.showDoc = true;
          this.showPdf = false;
          this.showImg = false;
          this.fileWidth = '65%';
        } else if (type === 'pdf') {
          this.pdfUrl = path;
          this.showDoc = false;
          this.showPdf = true;
          this.showImg = false;
          this.fileWidth = '90%';
        } else {
          this.imagesUrl = path;
          this.showDoc = false;
          this.showPdf = false;
          this.showImg = true;
          this.fileWidth = '50%';
        }
      },
      // 关闭文件预览弹窗前的回调函数，清空预览链接
      closePreviewClick(done) {
        this.fileUrl = '';
        this.pdfUrl = '';
        this.imagesUrl = '';
        done();
      },
      // 点击确定按钮，将上传的文件信息传递给父组件
      dataSruse() {
        this.$emit('upload-success', this.urlList);
        this.dialogVisible3 = false;
      },
    },
  }
</script>