Spring Boot + Vue3 实现七牛云大视频上传

在现代的Web应用中，文件上传是一个常见而重要的功能。本篇博客将介绍如何通过Vue.js和Spring Boot实现一个简单的视频上传功能，同时使用七牛云作为存储服务。

1. 前端实现（Vue.js）

HTML模板

<el-form-item label="宣传视频" prop="promotionalVideo"><el-upload style="width: 850px" v-model:file-list="promotionalVideoFileList" :limit="1" accept=".mp4" :http-request="handleUpload"><el-button type="primary">选择宣传视频上传</el-button></el-upload>
</el-form-item>

在这里，我们使用了Element UI的上传组件，限制了文件类型为.mp4，同时只能上传一个文件。上传的具体实现逻辑在下面的JavaScript代码中。

JavaScript代码

import * as qiniu from 'qiniu-js';async function handleUpload(option) {const response = await getUploadToken();const upToken = response.data;const config = {useCdnDomain: true,region: qiniu.region.z0,concurrentRequestLimit: 6,};const observable = qiniu.upload(option.file, null, upToken, null, config)return observable.subscribe({next(resp) {option.onProgress({ percent: resp.total.percent })},error(err) {option.onError(err)},complete(resp) {// 上传成功后将文件名保存到form中form.value.promotionalVideo = resp.keyoption.onSuccess(resp)}})
}

在这部分代码中，我们使用了七牛云提供的JavaScript SDK完成文件的上传过程。通过调用getUploadToken方法获取上传凭证，然后使用qiniu.upload方法实现具体的上传逻辑。上传成功后，将文件名保存到表单中。

2. 后端实现（Spring Boot）

后端Controller

@ApiOperation("获取七牛云上传Token")
@GetMapping(value = "/uploadToken")
public R<String> getUploadToken() {return R.ok(qiniuGetUploadTokenWechatService.getUploadToken());
}

这是一个简单的Spring Boot Controller，通过qiniuGetUploadTokenWechatService.getUploadToken()获取上传凭证，并返回给前端。

Service部分

public class QiniuGetUploadTokenWechatService {public String getUploadToken() {Auth auth = Auth.create(qiniuConfig.getAccessKey(), qiniuConfig.getSecretKey());return auth.uploadToken(qiniuConfig.getBucket());}
}