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

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",
          });
        }
      }
    },
相关推荐
IT_陈寒12 小时前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
怕浪猫13 小时前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览13 小时前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦031813 小时前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm13 小时前
立体echarts柱状图咋做
前端·vue.js·echarts
wuhen_n13 小时前
阿里云百炼平台 API 接入教程(附 Node.js + TypeScript 实战)
前端·人工智能·阿里云·ai编程
码语智行13 小时前
操作日志注解模块
java·前端·python
CDN36013 小时前
【前端实战】LCP指标从2.5s优化至0.8s!用360CDN的WebP自适应与缓存策略榨干性能
前端·缓存
星辰_mya13 小时前
ThreadLocal之微服务链路追踪
java·开发语言·前端