社区编辑申请
注册/登录
Spring Boot+Vue 文件上传,如何携带令牌信息?
开发 项目管理
如果使用 el-upload ,则需要引入 ElementUI,所以一般建议,如果使用了 ElementUI 做 UI 控件的话,则可以考虑使用 el-upload 组件来实现文件上传,如果没有使用 ElementUI 的话,则不建议使用 el-upload 组件,至于其他的 UI 控件,各自都有自己的文件上传组件,具体使用可以参考各自文档。

今天就来和大家说说手动传递令牌的事。

1.传统方案

我们先来看看,基于 session 认证,文件上传要怎么做。

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

  • 通过 Ajax 实现文件上传
  • 通过 ElementUI 里边的 Upload 组件实现文件上传

两种方案,各有优缺点,我们分别来看。

1.1 准备工作

首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 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() + ":" + req.getServerPort() + "/upload" + format + newName;
System.out.println(url);
return RespBean.ok("上传成功!");
}

这里的文件上传比较简单,上传的文件按照日期进行归类,使用 UUID 给文件重命名。

这里为了简化代码,我省略掉了异常捕获,上传结果直接返回成功,后端代码大伙可根据自己的实际情况自行修改。

1.2 Ajax 上传

在 Vue 中,通过 Ajax 实现文件上传,方案和传统 Ajax 实现文件上传基本上是一致的,唯一不同的是查找元素的方式。

<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>

在这里,首先提供一个文件导入 input 组件,再来一个导入按钮,在导入按钮的事件中来完成导入的逻辑。

importData() {
let myfile = this.$refs.myfile;
let files = myfile.files;
let file = files[0];
var formData = new FormData();
formData.append("file", file);
this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{
if (resp) {
console.log(resp);
}
})
}

关于这段上传核心逻辑,解释如下:

  • 首先利用 Vue 中的 $refs 查找到存放文件的元素。
  • type 为 file 的 input 元素内部有一个 files 数组,里边存放了所有选择的 file,由于文件上传时,文件可以多选,因此这里拿到的 files 对象是一个数组。
  • 从 files 对象中,获取自己要上传的文件,由于这里是单选,所以其实就是数组中的第一项。
  • 构造一个 FormData ,用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。
  • 构造好 FromData 后,就可以直接上传数据了,FormData 就是要上传的数据。
  • 文件上传注意两点,1. 请求方法为 post,2. 设置 Content-Type 为 multipart/form-data 。

这种文件上传方式,实际上就是传统的 Ajax 上传文件,和大家常见的 jQuery 中写法不同的是,这里元素查找的方式不一样(实际上元素查找也可以按照JavaScript 中原本的写法来实现),其他写法一模一样。这种方式是一个通用的方式,和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法:

export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}

经过这几步的配置后,前端就算上传完成了,可以进行文件上传了。

1.3 使用 el-upload 组件

如果使用 el-upload ,则需要引入 ElementUI,所以一般建议,如果使用了 ElementUI 做 UI 控件的话,则可以考虑使用 el-upload 组件来实现文件上传,如果没有使用 ElementUI 的话,则不建议使用 el-upload 组件,至于其他的 UI 控件,各自都有自己的文件上传组件,具体使用可以参考各自文档。

<el-upload
style="display: inline"
:show-file-list="false"
:on-success="onSuccess"
:on-error="onError"
:before-upload="beforeUpload"
action="/system/basic/jl/import">
<el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>
  • show-file-list 表示是否展示上传文件列表,默认为true,这里设置为不展示。
  • before-upload 表示上传之前的回调,可以在该方法中,做一些准备工作,例如展示一个进度条给用户 。
  • on-success 和 on-error 分别表示上传成功和失败时候的回调,可以在这两个方法中,给用户一个相应的提示,如果有进度条,还需要在这两个方法中关闭进度条。
  • action 指文件上传地址。
  • 上传按钮的点击状态和图标都设置为变量 ,在文件上传过程中,修改上传按钮的点击状态为不可点击,同时修改图标为一个正在加载的图标 loading。
  • 上传的文本也设为变量,默认上传 button 的文本是 数据导入 ,当开始上传后,将找个 button 上的文本修改为 正在导入。

相应的回调如下:

onSuccess(response, file, fileList) {
this.enabledUploadBtn = true;
this.uploadBtnIcon = 'el-icon-upload2';
this.btnText = '数据导入';
},
onError(err, file, fileList) {
this.enabledUploadBtn = true;
this.uploadBtnIcon = 'el-icon-upload2';
this.btnText = '数据导入';
},
beforeUpload(file) {
this.enabledUploadBtn = false;
this.uploadBtnIcon = 'el-icon-loading';
this.btnText = '正在导入';
}

在文件开始上传时,修改上传按钮为不可点击,同时修改上传按钮的图标和文本。

文件上传成功或者失败时,修改上传按钮的状态为可以点击,同时恢复上传按钮的图标和文本。

上传效果图如下:

使用 el-upload 做文件上传,松哥之前也录过一个视频,小伙伴们可以参考(本视频节选自松哥自制的 Spring Boot+Vue+微人事系列视频教程):

1.4 两种方式比较

两种上传方式各有优缺点:

  • 第一种方式最大的优势是通用,一招鲜吃遍天,到哪里都能用,但是对于上传过程的监控,进度条的展示等等逻辑都需要自己来实现。
  • 第二种方式不够通用,因为它是 ElementUI 中的组件,得引入 ElementUI 才能使用,不过这种方式很明显有需多比较方便的回调,可以实现非常方便的处理常见的各种上传问题。
  • 常规的上传需求第二种方式可以满足,但是如果要对上传的方法进行定制,则还是建议使用第一种上传方案。

2.手动传递令牌

对于上面不同的文件上传方式,手动上传令牌也有不同的方案,松哥来和大家挨个介绍。我这里服务端认证是 OAuth2+JWT 的方式,所以接下来令牌传递主要是按照 OAuth2 的格式来传递令牌,其实都是修改请求头,只要这种方式会了,其他方式也就会了。

关于 OAuth2,如果小伙伴们还不熟悉,可以看看松哥之前写的系列教程:OAuth2系列

2.1 Ajax 传递令牌

Ajax 传递令牌实际上是非常容易的,我们只需要稍微修改请求头即可。我给大家举一个简单例子。

如果你用的 axios 来做网络请求,那么按照如下方式添加请求头即可(或者在请求拦截器中统一添加):

export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + token
}
});
}

如果你用了 jQuery 的话,那么按照如下方式添加请求头即可:

$("#btnClick").click(function () {
var formData = new FormData();
formData.append("file", $("#userface")[0].files[0]);
$.ajax({
url: '/fileupload',
type: 'post',
headers: {
'Authorization': 'Bearer ' + token
},
data: formData,
processData: false,
contentType: false,
success: function (msg) {
alert(msg);
}
});
});

无非就是修改请求头,只要是自己发送请求的,请求头都是可以自由定制的,无论你用 jQuery 还是 axios 还是原生的 XMLHttpRequest。

2.2 el-upload 处理令牌

如果使用了 el-upload,我们就得在人家框架里边玩了,得符合框架要求,这虽然多了一些掣肘,但是也不是不能实现,松哥这里和大家介绍两种方案。

2.2.1 方案一

方案一是我目前采用的方案,因为 el-upload 支持定制请求头,这就好办了:

<el-upload
ref="upload"
class="upload-container"
:data="category"
:multiple="false"
:limit="1"
:headers="myHeaders"
:auto-upload="false"
:on-success="onSuccess"
:on-error="onError"
:file-list="fileList"
action="/appmanager/app/categories/"
>
<el-button size="mini" type="primary">选择图标</el-button>
</el-upload>

选择图标

其中,:headers="myHeaders" 就是我定制的请求头,然后在 data 中定义该变量即可:

data() {
return {
myHeaders: { Authorization: 'Bearer ' + getToken() }
}
},

2.2.2 方案二

方案二则是利用 el-upload 的 before-upload 钩子函数,开发者可以在这个钩子函数中自己手动上传,上传完成之后,返回一个 false,这时 el-upload 就会停止它自己的上传逻辑。这种方式我看到有别的小伙伴在用,所以给大家一个简单的案例参考下:

<el-upload action="http://www.javaboy.org" :before-upload="beforeUpload"></el-upload>
beforeUpload (file) {
//参考上面的 ajax 或者 axios 上传文件
return false
}

这里有几个细节大家需要注意下:

  • el-upload 的 action 属性随意给一个值,使之不报错,因为真正的上传地址我们将在 beforeUpload 方法中给出。
  • beforeUpload 方法的上传逻辑跟我们第一小节介绍的一致,我就不重复写了,注意上传的文件对象是 file.raw。
  • beforeUpload 方法最终返回 false,终止 el-upload 自己的上传逻辑。

3.小结

好了,和小伙伴们介绍了几种文件上传时候的令牌传递方式,不知道大家有没有 GET 到呢?

责任编辑:武晓燕 来源: 江南一点雨
相关推荐

2022-05-25 09:00:00

令牌JWT安全

2022-06-23 08:42:08

2021-01-25 14:10:49

2022-05-18 12:04:19

Mybatis数据源Spring

2022-06-15 11:51:14

Vue3开发避坑

2022-05-06 10:42:09

2022-05-17 08:39:05

VueViteTypeScript

2021-05-18 07:30:36

开发Spring Boot日志

2022-06-23 09:22:57

Vue技巧前端

2022-06-15 09:01:41

2022-06-07 14:15:44

Vue开发工具

2022-05-09 11:19:12

CSS函数开源

2022-06-06 08:42:04

2022-06-27 08:16:34

2022-05-09 11:01:18

2021-03-11 14:16:47

Spring Boo开发脚手架

2022-04-01 10:41:09

Vue.js开发工具

2021-09-30 06:31:12

2021-12-28 11:13:05

2022-06-28 15:06:35

容器Spring

编辑推荐

从人肉运维到智能运维,京东金融服务监控的进阶之路阿里10年分布式数据库技术沉淀,AliSQL X-Cluster的应用实战爱奇艺CTO汤兴:道天地将法,《孙子兵法》的管理之道强一致、高可用、自动容灾能力背后,阿里X-Paxos的应用实践猫眼电影李明辉:机器学习在票房预估中的实战
我收藏的内容
点赞
收藏

51CTO技术栈公众号