文件上传与令牌传递技术整合

松哥正在录制TienChin项目视频，这一系列视频涉及到Spring Boot和Vue3技术栈，并将探讨文件上传等技术。

1. 传统文件上传方案

松哥介绍了基于session认证的文件上传方法，现在的前后端分离项目更多采用JWT或OAuth2+JWT认证，这要求手动传递令牌。

1.1 准备工作

后端需要提供文件上传接口，在Spring Boot项目中，文件按日期归类，使用UUID重命名，并存储到本地。

1.2 Ajax上传

在Vue中，可以通过Ajax实现文件上传，使用FormData构造上传数据并通过axios发送请求，需要设置请求头为'multipart/form-data'。

1.3 使用el-upload组件

使用ElementUI的el-upload组件实现文件上传，可展示上传文件列表，提供上传前后的回调方法，并定制上传按钮和文本。

1.4 两种方式比较

第一种方式通用但需手动实现监控和进度条，第二种方式依赖ElementUI但有便捷的回调。

2. 手动传递令牌

不同的文件上传方法对应不同的手动传递令牌方案，以OAuth2格式为例，通过修改请求头来传递令牌。

2.1 Ajax传递令牌

使用axios或jQuery发送网络请求时，可以通过修改请求头来添加令牌。

2.2 el-upload处理令牌

使用el-upload组件时，可以通过定义请求头或利用before-upload钩子函数手动上传文件。

3. 小结

文章总结了文件上传和令牌传递的方法，希望能帮助理解和实施这些技术。

松哥重点推广了他即将发布的TienChin项目视频，鼓励大家学习并实践高完成率的项目开发。

测试自动化中遵循的最佳实践

了解更多

想要了解更多内容？

查看原文：Spring Boot+Vue 文件上传，如何携带令牌信息？

文章来源：

江南一点雨

扫码关注公众号