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

相关推荐
程序员岳焱19 分钟前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
FrankYoou23 分钟前
Jenkins 与 GitLab CI/CD 的核心对比
java·docker
麦兜*1 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了1 小时前
JAVA-springboot 整合Redis
java·spring boot·redis
大只鹅1 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
天河归来1 小时前
使用idea创建springboot单体项目
java·spring boot·intellij-idea
weixin_478689762 小时前
十大排序算法汇总
java·算法·排序算法
码荼2 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
IT_10242 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle