上传文件（不通过组件自动上传，并且使用post方式上传）

由于一些需求 无法使用el-upload组件直接进行上传，所以使用以下方法进行接口方式提交
api文件

// 上传文件
export function uploadFile(url,data) {
    return request({
        url: url,
        method: 'post',
        data: data
    })
}

vue文件

<el-upload
    ref="upload"
    :limit="10"  //最多上传十个文件
    action="#"   //	必选参数，上传的地址 
    :multiple="true"  //	是否支持多选文件
    :show-file-list="true"  //	是否显示已上传文件列表
    :on-change="handleUploadChange"   //	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    :on-progress="handleFileUploadProgress"  //文件上传时的钩子
    :on-success="handleFileSuccess"  //文件上传成功时的钩子
    :auto-upload="false"   //是否在选取文件后立即进行上传(此处重点 想要不自动上传需要选择false)
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
    :data="uploadData"  //上传时附带的额外参数
    :file-list="fileList" // 上传的文件列表集合
    drag   //显示边框 是否启用拖拽上传
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或<em>点击上传</em>
    </div>
    <span class="type_limit"
      >仅允许导入doc、docx、txt、xlsx、xls格式文件。</span>
    <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> -->
    <!-- </div> -->
</el-upload>

// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    beforeRemove(file, fileList) {
      // console.log("删除文件前file", file);
      // console.log("删除文件前fileList", fileList);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "上传失败",
          type: "warning",
        });
      }
      // this.upload.open = false;
      // this.upload.isUploading = false;
      // this.$refs.upload.clearFiles();
      // this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      // this.getList();
    },
    beforeUpload(file) {},
    handleUploadChange(file, fileList) {
      this.fileList = fileList;
    },
    // 提交上传文件
    submitFileForm(file, fileList) {
      console.log("this.ruleForm.projectId",this.ruleForm.projectId);
      let formData = new FormData();
      //所需参数
      this.fileList.forEach((item) => {
        formData.append("files", item.raw);
      });
      formData.append("fileType", this.ruleForm.type);
      formData.append("busId", this.ruleForm.projectId);
      formData.append("busiType", 'project');
      //接口
      uploadFile("/common/batchUploadFile", formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          // 关闭窗口
          this.dialogVisible = false;
          this.$refs.upload.clearFiles(); //清空上传的文件
          this.getFileList({ busiId: this.projectId });
          this.getDocType();
        } else {
          this.$message.error("上传失败！");
        }
      });
    },

下载文件

api

// 下载文件
export function download_file(data) {
    return request({
        url: '/common/download/resource?resource=' + data.resource,
        method: 'get',
        responseType:'blob'
    })
}

js部分

// 下载文件
downloadFile(row) {
  let data = {
    resource: row.filePath,
  };
  download_file(data).then((res) => {
    let fileName = row.name;
    const link = document.createElement("a");
    link.download = fileName;
    link.href = URL.createObjectURL(res);
    link.target = "_blank";
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    // URL.romoveObjectURL(fileUrl)
    document.body.removeChild(link);
  });
},