快捷導(dǎo)航

SpringBoot+Vue3實(shí)現(xiàn)七牛云大視頻上傳

更新時(shí)間：2025年07月28日 09:03:43 作者：吳啟維

現(xiàn)代Web應(yīng)用中文件上傳很重要,本文用Vue.js和Spring Boot實(shí)現(xiàn)視頻上傳功能,同時(shí)使用七牛云作為存儲(chǔ)服務(wù),文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 前端實(shí)現(xiàn)（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，同時(shí)只能上傳一個(gè)文件。上傳的具體實(shí)現(xiàn)邏輯在下面的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完成文件的上傳過程。通過調(diào)用getUploadToken方法獲取上傳憑證，然后使用qiniu.upload方法實(shí)現(xiàn)具體的上傳邏輯。上傳成功后，將文件名保存到表單中。

2. 后端實(shí)現(xiàn)（Spring Boot）

后端Controller

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

這是一個(gè)簡(jiǎn)單的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創(chuàng)建了Auth對(duì)象，并使用配置文件中的Access Key、Secret Key、Bucket信息生成上傳憑證。

3. 總結(jié)

通過以上步驟，我們成功地實(shí)現(xiàn)了一個(gè)基于Vue.js和Spring Boot的視頻上傳功能，利用七牛云作為文件存儲(chǔ)服務(wù)。這個(gè)例子展示了前后端如何協(xié)同工作，使用戶能夠輕松地上傳視頻文件。

到此這篇關(guān)于SpringBoot+Vue3實(shí)現(xiàn)七牛云大視頻上傳的文章就介紹到這了,更多相關(guān)SpringBoot+Vue3七牛云視頻上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: