upload 附件上传流程

组件部分：

别忘了定义fileList 我这里就不写data了
<el-upload
              class="upload-demo"
              action="http://192.168.3.166:8086/res/upload"
              accept=".jPDF,.docx,.doc,.xls,.xlsx"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="beforeupload"
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传pdf、docx、doc、xls、xlsx文件,且不超过20M</div>
            </el-upload>

方法部分

// 附件上传
    beforeupload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

      const whiteList = ["pdf", "doc", "docx", "xls", "xlsx"];

      if (whiteList.indexOf(fileSuffix) === -1) {
        Message.error({
          type: "error",
          message: "上传文件只能是 pdf、doc、docx、xls、xlsx格式",
        });
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isLt2M) {
        Message.error({
          type: "error",
          message: "上传文件大小不能超过 20MB",
        });
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      if (res.code === 0) {
        this.fileList.push({ ...res.data, name: res.data.fileName });
      }
    },
    handleRemove(file, fileList) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.uid;

      // 2.从pictureList数组中，找到图片对应的索引值
      const i = this.fileList.findIndex((x) => x.uid == filePath);

      // 3.调用splice方法，移除图片信息
      this.fileList.splice(i, 1);
    },
    handleExceed(files, fileList) {
      Message.error({
        type: "error",
        message: `最多只能上传 5 个文件`,
      });
    },