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

<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>

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)
    }
  })
}

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

public class QiniuGetUploadTokenWechatService {
    public String getUploadToken() {
        Auth auth = Auth.create(qiniuConfig.getAccessKey(), qiniuConfig.getSecretKey());
        return auth.uploadToken(qiniuConfig.getBucket());
    }
}