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

相关推荐
BD_Marathon13 分钟前
IDEA中创建Maven Web项目
前端·maven·intellij-idea
waillyer20 分钟前
taro跳转路由取值
前端·javascript·taro
凌辰揽月31 分钟前
贴吧项目总结二
java·前端·css·css3·web
代码的余温32 分钟前
优化 CSS 性能
前端·css
在雨季等你1 小时前
奋斗在创业路上的老开发
android·前端·后端
yume_sibai1 小时前
Vue 生命周期
前端·javascript·vue.js
阿廖沙10241 小时前
前端不改后端、不开 Node,彻底搞定 Canvas 跨域下载 —— wsrv.nl 野路子实战指南
前端
讨厌吃蛋黄酥1 小时前
🌟 React Router Dom 终极指南:二级路由与 Outlet 的魔法之旅
前端·javascript
花颜yyds1 小时前
three.js学习
前端·three.js
SixHateSeven1 小时前
🚀 TSX动态编译的黑科技,快如闪电!
前端·编译器