解决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

相关推荐
智绘前端31 分钟前
sass语法@import将被放弃???升级@use食用指南!
前端·css·sass·scss
suedar32 分钟前
coding 上通过流水线更新subTree模块
前端
羽沢3133 分钟前
Sass基础
前端·css·sass
正宗咸豆花33 分钟前
【PromptCoder + Cursor】利用AI智能编辑器快速实现设计稿
前端·人工智能·编辑器·prompt·提示词
不能只会打代码36 分钟前
六十天前端强化训练之第七天CSS预处理器(Sass)案例:变量与嵌套系统详解
前端·css·sass·css预处理器(sass)
关山月1 小时前
🌊 布局抖动:是什么?如何消除它
前端
小妖6661 小时前
css3的transform:tanslateZ没有效果
前端·css·css3
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS医院药品管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
见青..2 小时前
[BUUCTF]web--wp(持续更新中)
前端·web安全·网络安全
二川bro2 小时前
前端模块化管理深度解析:从混沌到秩序的全链路实践指南
前端