springboot+vue中文件上传，如何携带令牌信息_springboot+vue 图文表单上传-CSDN博客

本文链接：https://blog.csdn.net/qq_34136709/article/details/106850289

本文介绍了在SpringBoot+Vue项目中文件上传的两种实现方式：Ajax和ElementUI的Upload组件，并讲解了如何在文件上传时手动携带令牌信息，特别是OAuth2+JWT认证下的令牌传递方法。详细阐述了在axios和jQuery中设置请求头，以及在el-upload组件中自定义请求头或使用before-upload钩子实现令牌传递。

摘要由CSDN通过智能技术生成

springboot+vue中文件上传，如何携带令牌信息

近期在弄一个视频监控小项目，采用的是springboot+vue的故里面涉及到的一些知识点，会做一个介绍与总结，项目有关信息地址如下：

https://blog.csdn.net/qq_34136709/article/details/106745919

今天我们就来说说文件上传这一块
在前后端分离开发中，我们是基于 session 来做认证的，所以并不需要考虑携带令牌的问题，但可能采用 JWT 或者是 OAuth2+JWT 的方式来做认证，如果是这样的话，那我们就要手动传递令牌了

首先我们还是讲讲传统的基于 session 认证，文件上传要怎么做。

在 Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案：

1.通过 Ajax 实现文件上传
2.通过 ElementUI 里边的 Upload 组件实现文件上传

两种方案，各有优缺点，我们分别来看。
首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {
   
    String format = sdf.format(new Date());
    String realPath = req.getServletContext().getRealPath("/upload") + format;
    File folder = new File(realPath);
    if (!folder.exists()) {
   
        folder.mkdirs();
    }
    String oldName = file.getOriginalFilename();
    String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
    file.transferTo(new File(folder,newName));
    String url = req.getScheme() + "://" + req.getServerName() + ":"