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

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

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

1. 前端實現(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，同時只能上傳一個文件。上傳的具體實現(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方法實現(xiàn)具體的上傳邏輯。上傳成功后，將文件名保存到表單中。

2. 后端實現(xiàn)（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創(chuàng)建了Auth對象，并使用配置文件中的Access Key、Secret Key、Bucket信息生成上傳憑證。