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

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

1. 前端实现(Vue.js)

HTML模板
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代码
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
java 复制代码
@ApiOperation("获取七牛云上传Token")
@GetMapping(value = "/uploadToken")
public R<String> getUploadToken() {
    return R.ok(qiniuGetUploadTokenWechatService.getUploadToken());
}

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

Service部分
java 复制代码
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的视频上传功能,利用七牛云作为文件存储服务。这个例子展示了前后端如何协同工作,使用户能够轻松地上传视频文件。

相关推荐
xmh-sxh-131411 分钟前
jdk各个版本介绍
java
XINGTECODE25 分钟前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
天天扭码31 分钟前
五天SpringCloud计划——DAY2之单体架构和微服务架构的选择和转换原则
java·spring cloud·微服务·架构
程序猿进阶31 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
FIN技术铺36 分钟前
Spring Boot框架Starter组件整理
java·spring boot·后端
小曲程序43 分钟前
vue3 封装request请求
java·前端·typescript·vue
凡人的AI工具箱1 小时前
15分钟学 Go 第 60 天 :综合项目展示 - 构建微服务电商平台(完整示例25000字)
开发语言·后端·微服务·架构·golang
陈王卜1 小时前
django+boostrap实现发布博客权限控制
java·前端·django
小码的头发丝、1 小时前
Spring Boot 注解
java·spring boot
先天牛马圣体1 小时前
如何提升大型AI模型的智能水平
后端