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

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",
          });
        }
      }
    },
相关推荐
陈随易1 小时前
Vue 编译器换掉 source map,快了三四成
前端·后端·程序员
ZhengEnCi2 小时前
12 种高级 UI 交互效果及对应 AI 提示词:从按压回弹到底部抽屉的物理感教学
前端·css·交互设计
IT_陈寒5 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端
用户2705077725246 小时前
MCP 最小 Server 实测:3 个 JSON-RPC 报错与修法
前端
用户499335025076 小时前
一人VIP账号多人共用:Web 代理里的会话共享怎么实现
前端
用户老李6 小时前
无线电自学教程 05:第一台收音机——从矿石机到 SDR
前端
IPIPD6 小时前
Node.js请求遇到503怎么重试?先解析Retry-After,再做有上限退避
前端
葡萄城技术团队6 小时前
dsh-spreadjs-editor 的集成链路:把 SpreadJS Designer 嵌进 Agent 工作台
前端
FlyWIHTSKY7 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上7 小时前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器