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

场景:

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


原因:

axios重新封装的问题


解决:

使用原生axios方法

//文件发生改变就会触发的事件
    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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/980624.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Maven】基于IDEA进行Maven工程的创建、构建

文章目录 一、基于IDEA创建Maven工程1. 概念梳理Maven工程的GAVP2. Idea构建Maven Java SE工程3. Idea构建Maven Java Web工程3.1 创建一个maven的javase工程3.2 修改pom.xml文件打包方式3.3 设置web资源路径和web.xml路径 4. Maven工程项目结构说明 二、基于IDEA进行Maven工程…

计算机毕业设计SpringBoot+Vue.js在线课程管理系统(源码+文档+PPT+讲解)

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

【爬虫基础】第二部分 爬虫基础理论 P3/3

上节内容回顾:【爬虫基础】第一部分 网络通讯 P1/3-CSDN博客 【爬虫基础】第一部分 网络通讯-Socket套接字 P2/3-CSDN博客 【爬虫基础】第一部分 网络通讯-编程 P3/3-CSDN博客 【爬虫基础】第二部分 爬虫基础理论 P1/3-CSDN博客 【爬虫基础】第二部分 爬虫基础理论…

【子网掩码计算器:Python + Tkinter 实现】

子网掩码计算器:Python Tkinter 实现 引言代码功能概述代码实现思路1. 界面设计2. 功能实现3. 事件处理 子网掩码计算器实现步骤1. 导入必要的库2. 定义主窗口类 SubnetCalculatorApp3. 创建菜单栏4. 创建界面组件5. 判断 IP 地址类别6. 计算子网信息7. 其他功能函…

【第十节】C++设计模式(结构型模式)-Flyweight( 享元)模式

目录 一、问题背景 二、模式选择 三、代码实现 四、总结讨论 一、问题背景 享元模式(Flyweight Pattern)在对象存储优化中的应用 在面向对象系统的设计与实现中,创建对象是最常见的操作之一。然而,如果一个应用程序使用了过多…

macOS - 使用 tmux

文章目录 安装 tmux使用更多快捷键说明 安装 tmux brew install tmux使用 在终端输入 tmux 进入 tmux 界面,然后 输入 Control Option B 进入交互模式 输入 % 左右分栏," 上下分割 上一个窗格:{,下一个:} PS…

【洛谷贪心算法题】P1094纪念品分组

该题运用贪心算法,核心思想是在每次分组时,尽可能让价格较小和较大的纪念品组合在一起,以达到最少分组的目的。 【算法思路】 输入处理:首先读取纪念品的数量n和价格上限w,然后依次读取每件纪念品的价格,…

16. LangChain实战项目2——易速鲜花内部问答系统

需求简介 易束鲜花企业内部知识库如下: 本实战项目设计一个内部问答系统,基于这些内部知识,回答内部员工的提问。 在前面课程的基础上,需要安装的依赖包如下: pip install docx2txt pip install qdrant-client pip i…

Minio搭建并在SpringBoot中使用完成用户头像的上传

Minio使用搭建并上传用户头像到服务器操作,学习笔记 Minio介绍 minio官网 MinIO是一个开源的分布式对象存储服务器,支持S3协议并且可以在多节点上实现数据的高可用和容错。它采用Go语言开发,拥有轻量级、高性能、易部署等特点,并且可以自由…

Spring AI:让AI应用开发更简单

文章目录 引言什么是Spring AI?核心特性 Spring AI的核心组件ChatClient:聊天模型示例代码图示 ImageClient:图像生成示例代码图示 Prompt Templates:提示词模板示例代码 Spring AI的优势示例项目:智能机票助手代码实现…

【C】链式二叉树算法题1 -- 单值二叉树

leetcode链接https://leetcode.cn/problems/univalued-binary-tree/description/ 1 题目描述 如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树。只有给定的树是单值二叉树时,才返回 true;否则返回 false。 示例 1&#xff1…

什么是最终一致性,它对后端系统的意义是什么

最终一致性(Eventual Consistency)是分布式系统中的一种一致性模型。与传统的强一致性模型不同,最终一致性并不要求系统在任何时刻都保持一致,而是保证在足够的时间后,所有节点的数据最终会达到一致的状态。换句话说,系统允许短时间内出现数据的不一致性,但最终会通过某…

掌握大模型高效任务流搭建(一):构建LangChain任务流

前言: 在LangChain框架中,“链”占据着核心地位。它允许我们将众多任务模块串联起来,构建出富有弹性的任务流。借助这种链式结构,我们能够处理复杂的逻辑,并实现任务的自动化。在实际场景里,链式操作极大地…

目标检测——数据处理

1. Mosaic 数据增强 Mosaic 数据增强步骤: (1). 选择四个图像: 从数据集中随机选择四张图像。这四张图像是用来组合成一个新图像的基础。 (2) 确定拼接位置: 设计一个新的画布(输入size的2倍),在指定范围内找出一个随机点(如…

塑造网络安全的关键事件

注:本文为 “网络安全” 相关文章合辑。 机翻,未校。 Timeline of Cyber Security: Key Events that Shaped the Field 网络安全时间表:塑造该领域的关键事件 October 29, 2023 Cyberattacks are an everyday threat, always changing. T…

题解 | 牛客周赛82 Java ABCDEF

目录 题目地址 做题情况 A 题 B 题 C 题 D 题 E 题 F 题 牛客竞赛主页 题目地址 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 做题情况 A 题 判断字符串第一个字符和第三个字符是否相等 import java.io.*; import java.math.*; import java.u…

Redis 高可用性:如何让你的缓存一直在线,稳定运行?

🎯 引言:Redis的高可用性为啥这么重要? 在现代高可用系统中,Redis 是一款不可或缺的分布式缓存与数据库系统。无论是提升访问速度,还是实现数据的高效持久化,Redis 都能轻松搞定。可是,当你把 …

uniapp-原生android插件开发摘要

uni-app在App侧的原生扩展插件,支持使用java、object-c等原生语言编写,从HBuilderX 3.6起,新增支持了使用uts来开发原生插件。 基础项目 UniPlugin-Hello-AS工程请在App离线SDK中查找 基础项目(App离线SDK)已经配置好了自定义插件所需要的…

【定昌Linux系统】部署了java程序,设置开启启动

将代码上传到相应的目录,并且配置了一个.sh的启动脚本文件 文件内容: #!/bin/bash# 指定JAR文件的路径(如果JAR文件在当前目录,可以直接使用文件名) JAR_FILE"/usr/local/java/xs_luruan_client/lib/xs_luruan_…

SpringBoot源码解析(十):应用上下文AnnotationConfigServletWebServerApplicationContext构造方法

SpringBoot源码系列文章 SpringBoot源码解析(一):SpringApplication构造方法 SpringBoot源码解析(二):引导上下文DefaultBootstrapContext SpringBoot源码解析(三):启动开始阶段 SpringBoot源码解析(四):解析应用参数args Sp…