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

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",
          });
        }
      }
    },
相关推荐
不好听6133 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus3 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子4 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech4 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn4 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧6 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw7 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯7 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a1117767 小时前
微光小屋-前端养成小游戏 开源项目
前端