前端调用接口进行上传文件

Onlyᝰ2025-12-27 21:07

1、html部分

html 复制代码

                <el-upload class="upload-demo" action="https://192.168.1.55:8080/dataManagement_importMsg"
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                  :limit="1" :on-exceed="handleExceed" :file-list="node.fileList" :before-upload="handleBeforeUpload"
                  :auto-upload="false" :on-change="handleChange" accept=".xlsx" ref="modeUpload">
                  <div class="uploadsc">
                    <el-button icon="el-icon-upload2" size="mini">上传文件</el-button>
                  </div>
                </el-upload>

2、接口定义

javascript 复制代码

 export function uploadTemplate(data) {
  return request.post("/uploadTemplate", data,{
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  });
}

3、js部分（接口导入）

javascript 复制代码

import { uploadTemplate } from "@/api/flow";

4、js部分（参数定义）

javascript 复制代码

      node: {
        // file: '',
        // fileList: [],
      },

5、js部分（方法）

javascript 复制代码

    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.node.file = null;
      this.node.fileList = [];
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      // this.$message.warning(
      //   `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
      //     files.length + fileList.length
      //   } 个文件`
      // );
      this.$message.warning(`已选择一个文件，请删除后重新选择。`);
    },
    handleBeforeUpload(file) {
      this.file = file;
      console.log(file);
      this.node.fileList.push(file);
      console.log("文件上菜弄成");
    },
    async handleChange(file, fileList) {
      if (file.size > 90 * 1024 * 10240000) {
        this.$message.error("文件过大，无法上传");
        this.$refs.modeUpload.clearFiles();
        return;
      } else {
        console.log("文件状态改变:", file, fileList);
        this.node.fileList = fileList;
        this.node.file = file.raw;
        const formData = new FormData();
        formData.append("file", this.node.file);
        formData.append("id", this.node.id);
        let result = await uploadTemplate(formData);
        if (result.code == 200) {
          this.$message({
            message: result.message,
            type: "success",
          });
        } else {
          this.$message({
            message: result.message,
            type: "error",
          });
        }
      }
    },