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

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",
          });
        }
      }
    },
相关推荐
wenzhangli72 小时前
Ooder A2UI 核心架构深度解析:WEB 拦截层的设计与实现
前端·架构
前端百草阁3 小时前
【前端性能优化全链路指南】从开发编写到构建运行的多维度实践
前端·性能优化
女生也可以敲代码3 小时前
AI时代下的50道前端开发面试题:从基础到大模型应用
前端·面试
ZhengEnCi3 小时前
M5-markconv自定义CSS样式指南 📝
前端·css·python
IT_陈寒3 小时前
SpringBoot自动配置的坑差点让我加班到天亮
前端·人工智能·后端
xingpanvip3 小时前
星盘接口开发文档:星相日历接口指南
android·开发语言·前端·css·php·lua
@PHARAOH4 小时前
WHAT - GitLens supercharged 插件
前端
TT模板4 小时前
苹果cms整合西瓜播放器XGplayer插件支持跳过片头尾
前端·html5
Wect4 小时前
React 性能优化精讲
前端·react.js·性能优化
追风筝的人er5 小时前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
前端·vue.js·后端