解决vue中formdata 传值为空 控制台报错SyntaxError - expected expression, got ‘<‘

场景:

  1. 使用axios上传文件给接口 参数显示为空对象
  2. 控制台报错: SyntaxError - expected expression, got '<'

原因:

axios重新封装的问题

解决:

使用原生axios方法

javascript 复制代码
//文件发生改变就会触发的事件
    beforeXlsUpload(file) {
      // 通过split方法和fileArr方法获取到文件的后缀名
      let fileArr = file.name.split(".");
      let suffix = fileArr[fileArr.length - 1];
      //只能导入.xls和.xlsx文件
      if (!/(xls|xlsx)/i.test(suffix)) {
        this.$message("文件格式不正确");
        return false;
      }
      //不能导入大小超过2Mb的文件
      if (file.size > 2 * 1024 * 1024) {
        this.$message("文件过大,请上传小于2MB的文件〜");
        return false;
      }
      return true;
    },
    //文件发生改变就会触发的事件
    handleUploadFun(file) {
      if (this.beforeXlsUpload(file)) {
        this.fileList.name = file.name;
        this.fileList.url = "";
        var formdata = new FormData();
        formdata.append("file", file.raw);
        axios
          .post(this.uploadFileUrl, formdata, {
            headers: {
              Authorization: getToken(),
            },
          })
          .then((res) => {
            let resData = res.data;
            if (resData.code == 200) {
              if (resData.data == "200") {
                this.getList();
                this.$modal.msgSuccess("导入成功");
              } else {
                this.$confirm("部分信息导入成功,是否下载错误数据?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    getImport(resData.data).then((res2) => {
                      if (res2.code == 200) {
                        window.location = process.env.VUE_APP_BASE_API + res2.data;
                        this.getList();
                        // this.$modal.msgSuccess("下载成功");
                      }
                    });
                  })
                  .catch((e) => {
                    console.log(e);
                    this.$message({
                      type: "info",
                      message: "已取消",
                    });
                  });
              }
              this.msg = res.errMsg;
            }
          });
      }
    },
注意!!!

axios返回的res值为外层 之前获取为res.data 现在则需要写为res.data.data

相关推荐
爱勇宝7 小时前
AI 时代:智商决定起点,情商决定走多远
前端·ai编程
kyriewen7 小时前
用了半年 Claude Code 后,我尝试关掉它写了一周代码——结果比想象中严重
前端·javascript·ai编程
IT_陈寒8 小时前
Vite的静态资源打包让我熬夜到三点,这坑千万别跳
前端·人工智能·后端
山河木马9 小时前
矩阵专题0-webGL中的矩阵
javascript·webgl·计算机图形学
徐小夕9 小时前
万字拆解 JitWord:企业级实时协同文档底层架构 + 大模型 AI 融合完整实践
前端·vue.js·github
一份执念9 小时前
uni-app 小程序分包限制处理与主包体积优化实战
前端·微信小程序
Asize9 小时前
多模态生图:从 Vite 工程化到前端调用 Qwen Image
javascript·人工智能·后端
MariaH9 小时前
初识MySQL
前端
陳陈陳9 小时前
从Token到Embedding:一篇文章搞懂大模型的「文字数学变形记」
前端·javascript·ai编程
十有八七9 小时前
AI时代的置身X内
前端·人工智能