前端通过函数方法触发文件上传、限制文件类型、限制文件大小、上传的进度

包含文件列的表格

  <vxe-table
        ref="table"
        border
        :row-config="{ isHover: true }"
        highlight-hover-row
        align="center"
        stripe
        :data="tableAll.data">
        <vxe-column
          type="seq"
          title="序号"
          width="60"
          align="center"></vxe-column>
        <vxe-column
          width="260"
          title="附件类型"
          field="type"
          align="center"></vxe-column>
        <vxe-column
          title="附件名称"
          field="fileName"
          header-align="center"
          align="left">
        <vxe-column
          title="操作"
          width="260"
          align="center">
          <template #default="{ row }">
            <div class="btns">
              <el-tooltip
                content="预览"
                placement="top">
                <i
                  class="icon icon-view"
                  @click="handleFileView(row)"
                  v-if="row.fileName"></i>
              </el-tooltip>
              <el-tooltip
                content="上传"
                placement="top">
                <i
                  class="icon icon-up"
                  @click="handleFileUpload(row)"
                  v-if="!row.fileName"></i>
              </el-tooltip>
              <el-tooltip
                content="下载"
                placement="top">
                <i
                  class="icon icon-down"
                  @click="handleFileDown(row)"
                  v-if="row.fileName"></i>
              </el-tooltip>
              <el-tooltip
                content="删除"
                placement="top">
                <i
                  class="icon icon-del-min"
                  @click="handleFileDel(row)"
                  v-if="row.fileName"></i>
              </el-tooltip>
            </div>
            <el-progress
              v-if="row.type && row.type === currentFileName"
              :percentage="progress"
              :status="progress === 100 ? 'success' : undefined" />
          </template>
        </vxe-column>
      </vxe-table>

限制文件类型、限制文件大小、上传的进度、获取上传进度

 import { ElMessage } from 'element-plus';
 ...
 async handleFileUpload(row) {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      // 限制文件类型
      fileInput.accept = '.ppt,.pptx,.xls,.xlsx,.doc,.docx,.pdf,.ceb';
      // 隐藏文件上传标签
      fileInput.style.display = 'none';
      // 将文件上传标签插入到body底部
      document.body.appendChild(fileInput);
      // 触发文件上传
      fileInput.click();
      fileInput.onchange = async (e) => {
        const files = e.target.files;
        if (files.length === 0) {
          // 用户未选择文件或取消了文件选择
          fileInput.remove();
          return;
        }
        const allowedTypes = [
          '.ppt',
          '.pptx',
          '.xls',
          '.xlsx',
          '.doc',
          '.docx',
          '.pdf',
          '.ceb',
        ];
        // 获取文件扩展名
        const fileName = files[0].name;
        const fileExtension = fileName.slice(fileName.lastIndexOf('.'));
        // 检查文件类型是否在允许的类型中
        if (!allowedTypes.includes(fileExtension)) {
          ElMessage.error(
            '文件类型不正确，请选择正确的文件格式(.ppt,.pptx,.xls,.xlsx,.doc,.docx,.pdf,.ceb)'
          );
          fileInput.remove();
          return;
        }
        // 检查文件大小，限制为10MB
        const maxSize = 10 * 1024 * 1024; // 10MB
        if (files[0].size > maxSize) {
          ElMessage.error('文件大小超过限制，请选择10MB以内的文件');
          fileInput.remove();
          return;
        }
        const formData = new FormData();
        formData.append('file', files[0]);
        this.currentFileName = row.type;
        try {
          const res = await http({
            method: 'post',
            url: '/file/upload/single/file',
            data: formData,
            params: {
              type: this.currentFileName,
            },
            onUploadProgress: (progressEvent) => {
              let complete =
                ((progressEvent.loaded / progressEvent.total) * 100) | 0;
              // 这里为上传的进度
              this.progress = complete;
            },
          });
          if (res.data.code === 0) {
            this.$message.success('上传成功！');
          } else {
            this.$message.error(res.data.data);
          }
        } finally {
          this.currentFileName = '';
          this.progress = 0;
          fileInput.remove();
          // 刷新数据列表
          this.initData();
        }
      };
    },