今天就来和大家说说手动传递令牌的事。,我们先来看看，基于 session 认证，文件上传要怎么做。,在 Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案：,两种方案，各有优缺点，我们分别来看。,首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下：,这里的文件上传比较简单，上传的文件按照日期进行归类，使用 UUID 给文件重命名。,这里为了简化代码，我省略掉了异常捕获，上传结果直接返回成功，后端代码大伙可根据自己的实际情况自行修改。,在 Vue 中，通过 Ajax 实现文件上传，方案和传统 Ajax 实现文件上传基本上是一致的，唯一不同的是查找元素的方式。,在这里，首先提供一个文件导入 input 组件，再来一个导入按钮，在导入按钮的事件中来完成导入的逻辑。,关于这段上传核心逻辑，解释如下：,这种文件上传方式，实际上就是传统的 Ajax 上传文件，和大家常见的 jQuery 中写法不同的是，这里元素查找的方式不一样(实际上元素查找也可以按照JavaScript 中原本的写法来实现)，其他写法一模一样。这种方式是一个通用的方式，和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法：,经过这几步的配置后，前端就算上传完成了，可以进行文件上传了。,如果使用 el-upload ，则需要引入 ElementUI，所以一般建议，如果使用了 ElementUI 做 UI 控件的话，则可以考虑使用 el-upload 组件来实现文件上传，如果没有使用 ElementUI 的话，则不建议使用 el-upload 组件，至于其他的 UI 控件，各自都有自己的文件上传组件，具体使用可以参考各自文档。,相应的回调如下：,在文件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和文本。,文件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和文本。,上传效果图如下：,使用 el-upload 做文件上传，松哥之前也录过一个视频，小伙伴们可以参考(本视频节选自松哥自制的 Spring Boot+Vue+微人事系列视频教程)：,两种上传方式各有优缺点：,对于上面不同的文件上传方式，手动上传令牌也有不同的方案，松哥来和大家挨个介绍。我这里服务端认证是 OAuth2+JWT 的方式，所以接下来令牌传递主要是按照 OAuth2 的格式来传递令牌，其实都是修改请求头，只要这种方式会了，其他方式也就会了。,关于 OAuth2，如果小伙伴们还不熟悉，可以看看松哥之前写的系列教程：OAuth2系列,Ajax 传递令牌实际上是非常容易的，我们只需要稍微修改请求头即可。我给大家举一个简单例子。,如果你用的 axios 来做网络请求，那么按照如下方式添加请求头即可(或者在请求拦截器中统一添加)：,如果你用了 jQuery 的话，那么按照如下方式添加请求头即可：,无非就是修改请求头，只要是自己发送请求的，请求头都是可以自由定制的，无论你用 jQuery 还是 axios 还是原生的 XMLHttpRequest。,如果使用了 el-upload，我们就得在人家框架里边玩了，得符合框架要求，这虽然多了一些掣肘，但是也不是不能实现，松哥这里和大家介绍两种方案。,2.2.1 方案一,方案一是我目前采用的方案，因为 el-upload 支持定制请求头，这就好办了：,选择图标,其中，:headers="myHeaders" 就是我定制的请求头，然后在 data 中定义该变量即可：,2.2.2 方案二,方案二则是利用 el-upload 的 before-upload 钩子函数，开发者可以在这个钩子函数中自己手动上传，上传完成之后，返回一个 false，这时 el-upload 就会停止它自己的上传逻辑。这种方式我看到有别的小伙伴在用，所以给大家一个简单的案例参考下：,这里有几个细节大家需要注意下：,好了，和小伙伴们介绍了几种文件上传时候的令牌传递方式，不知道大家有没有 GET 到呢?
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">