oss服务在视频文件上传的前端应用

本文介绍如何使用OSS服务进行大文件尤其是视频文件的前端分段上传,涉及oss服务协议、切片分段上传策略及与普通请求的区别。重点讲解了如何通过前端实现文件的切片上传,利用axios进行带有token验证的OSS服务上传,并处理上传状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

oss服务在视频文件上传的前端应用(关键点:1.oss服务协议,2.文件太大需要切片分段上传 3.oss服务与普通请求会有不同,返回在请求体里面。关键点是position)

<template>
<div class="upload-trunk-file">
    <a-upload
    class="upload"
    action=""
    :accept="acceptType"
    :showUploadList = "false"
    :beforeUpload="beforeUpload"
    :customRequest="uploadRequest"
  >
</template>

<script>
// import {globalBus} from '@/config/general/constant'
export default {
  data() {
    return {
      blockSize: Number(this.trunkSize) * 1024 * 1024,
      uploadFiles: []
    }
  },
  methods: {
    getFileParamsByUid(uid) {
      return this.uploadFiles.find(item => item.uid === uid)
    },

    async trunkUpload(uid) {
      let target = this.getFileParamsByUid(uid)
      // 上传之前需要获取上传服务地址
      if (!target.actionUrl) {
        this.setUploadStatus(uid, 'waiting')
        const {url} = await this.$https.get('/rims/service/oss/upload')
        target.actionUrl = url
      }

      let {chunkNumber, totalChunks, status, file} = this.setUploadStatus(uid, 'uploading')

      // 大于最小块,分段上传
      while ((totalChunks >= chunkNumber && status === 'uploading')) {
        const {blockSize} = this
        const nextSize = Math.min(chunkNumber * blockSize, file.size)
        const slice = file.slice((chunkNumber - 1) * blockSize, nextSize)

        await this.uploadToOSS(slice, uid)

        const cru = this.getFileParamsByUid(uid)
        chunkNumber = cru.chunkNumber
        totalChunks = cru.totalChunks
        status = cru.status
      }
    },
    // 上传OSS服务,并携带token信息
    uploadToOSS(trunk, uid) {
      const vm = this
      let target = this.getFileParamsByUid(uid)
      const CancelToken = this.$https.axios.CancelToken
      const {path, position, chunkNumber, totalChunks, file, actionUrl} = target
      const formData = new FormData()
      formData.append('name', file.name)
      formData.append('chunk', chunkNumber)
      formData.append('chunks', totalChunks)
      formData.append('file', trunk)
      return this.$https.post(`${actionUrl}/webupload/1.0/${encodeURIComponent(file.name)}?token=${this._token}`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'x-dss-object-uri': path,
          'x-dss-object-position': position
        },
        responseType: '',
        timeout: 30000,
        showErrorMessage: false,
        cancelToken: new CancelToken((c) => {
          target.cancelToken = c
        })
      }).then((res) => {
        const info = this.formatResponeHeader(res)
        const {errcode} = info
        // errcode === 0 表示成功
        if (errcode === '0') {
          vm.onSuccess(uid, info)
          return Promise.resolve(target)
        } else {
          vm.onError(uid, res)
          // vm.setUploadStatus(uid, 'error')
          return Promise.reject(target)
        }
      }).catch((e) => {
        vm.onError(uid, e)
        return Promise.reject(e)
      })
    },



</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值