SpringBoot+Vue3实现七牛云大视频上传
作者：吴启维
现代Web应用中文件上传很重要,本文用Vue.js和Spring Boot实现视频上传功能,同时使用七牛云作为存储服务,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
在现代的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.key
option.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());
}
}
在QiniuGetUploadTokenWechatService类中，我们使用了七牛云提供的Java SDK创建了Auth对象，并使用配置文件中的Access Key、Secret Key、Bucket信息生成上传凭证。
3. 总结
通过以上步骤，我们成功地实现了一个基于Vue.js和Spring Boot的视频上传功能，利用七牛云作为文件存储服务。这个例子展示了前后端如何协同工作，使用户能够轻松地上传视频文件。
到此这篇关于SpringBoot+Vue3实现七牛云大视频上传的文章就介绍到这了,更多相关SpringBoot+Vue3七牛云视频上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！