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

相关推荐
AI浩7 小时前
【Labelme数据操作】LabelMe标注批量复制工具 - 完整教程
运维·服务器·前端
涔溪7 小时前
CSS 网格布局(Grid Layout)核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
前端·css
2401_878454537 小时前
浏览器工作原理
前端·javascript
西陵8 小时前
为什么说 AI 赋能前端开发,已经不是选择题,而是必然趋势?
前端·架构·ai编程
by__csdn9 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码9 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
一条可有可无的咸鱼10 小时前
企业招聘信息,企业资讯进行公示
java·vue.js·spring boot·uni-app
Luna-player10 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu051910 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys10 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript