华为云文件上传(单个上传和分段上传)

首先引入静态文件:
在这里插入图片描述
华为云官网提供js下载的链接
在这里插入图片描述
然后后端提供一个公用接口,返回华为云上传的基本配置:
在这里插入图片描述
官网提供的链接:华为云obs信息配置

一:单个上传

huaweiyunUpload (file, fileName, name, url, size, callback, failCallBack) {
 // huaweiyunConfig为上面接口存储的vuex数据
   // 华为云上传流程
    var _self = this
    var obsClient = new ObsClient({ // 创建ObsClient实例
        access_key_id: _self.huaweiyunConfig.accessKeyId,
        secret_access_key: _self.huaweiyunConfig.secretAccessKey,
        // 这里以华北-北京四为例,其他地区请按实际情况填写
        server: _self.huaweiyunConfig.endPoint

    })
    var progressRate = function (transferredAmount, totalAmount, totalSeconds) {
        // 获取上传平均速率(KB/S)
        console.log(transferredAmount * 1.0 / totalSeconds / 1024)
        // 获取上传进度百分比
        _self.$set(_self, 'percent', Math.floor(transferredAmount * 100.0 / totalAmount))
    }
    obsClient.putObject({
        Bucket: _self.huaweiyunConfig.bucketName,
        Key: this.huaweiyunConfig.prefix+fileName,
        SourceFile: file.file,
        ProgressCallback: progressRate
    }, function (err, result) {
        if (err) {
            console.error('Error-->' + err)
            if (failCallBack) failCallBack(err)
        } else {
            if (result.CommonMsg.Status == 200) {
                // console.log('success====', result)
                if (callback) callback({ name: fileName, fileName: name, url: url, size: size })
            }
        }
    })
}

页面应用:

const url = this.huaweiyunConfig.viewPath + this.huaweiyunConfig.prefix+fileName
// file 文件流 fileName带后缀的文件名  name不带后缀的文件名 url 文件存储路径 size 文件大小
this.huaweiyunUpload(file, fileName, name, url, size, ()=>{// success function }, ()=>{// fail function})

二:分段上传

createInitTask (file, fileUrl = '', sucCallBack, failCallBack) { // 大文件上传-分段上传
            var _self = this
            const fileName = file.file.name // 文件名-带后缀
            const routeName = this.$route.matched[0].path
            const fileFullUrl = this.huaweiyunConfig.prefix + routeName + '/' + fileUrl + new Date().getTime() + '/' + fileName

            // 创建ObsClient实例
            var obsClient = new ObsClient({
                access_key_id: _self.huaweiyunConfig.accessKeyId,
                secret_access_key: _self.huaweiyunConfig.secretAccessKey,
                // 这里以华北-北京四为例,其他地区请按实际情况填写
                server: _self.huaweiyunConfig.endPoint

            })

            obsClient.initiateMultipartUpload({
                Bucket: _self.huaweiyunConfig.bucketName,
                Key: fileFullUrl,
                ContentType: 'text/plain',
                Metadata: { property: 'property-value' }
            }, function (err, result) {
                if (err) {
                    if (failCallBack) failCallBack()
                } else {
                    console.log('Status-->' + result.CommonMsg.Status)
                    if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
                        console.log('UploadId-->' + result.InterfaceResult.UploadId)
                        // if (createSuc) createSuc(obsClient,result, file, fileFullUrl)
                        _self.uploadSection(obsClient, result, file, fileFullUrl, sucCallBack, failCallBack)
                    }
                }
            })
        },
        uploadSection (obsClient, result, file, fileFullUrl, sucCallBack, failCallBack) { // 上传段
            var _self = this

            const PartSize = 20 * 1024 * 1024
            const UploadId = result.InterfaceResult.UploadId
            // const file = document.getElementById('input-file').files[0];
            const lastPartSize = file.file.size % PartSize
            // 段数量
            const count = Math.ceil(file.file.size / PartSize)
            let start = 1 // 当前段值
            const Parts = [] // 存放PartNumber, ETag
            // 上传第n段
            const uploadPart = (n, callback) => {
                obsClient.uploadPart({
                    Bucket: _self.huaweiyunConfig.bucketName,
                    Key: fileFullUrl,
                    // 设置分段号,范围是1~10000
                    PartNumber: n,
                    // 设置Upload ID
                    UploadId,
                    // 设置将要上传的大文件
                    SourceFile: file.file,
                    // 设置分段大小
                    PartSize: count === n ? lastPartSize : PartSize,
                    // 设置分段的起始偏移大小
                    Offset: (n - 1) * PartSize
                }, function (err, result) {
                    if (err) {
                        console.log('Error-->' + err)
                        if (failCallBack) failCallBack()
                    } else {
                        console.log('Status-->' + result.CommonMsg.Status)
                        if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
                            // console.log('ETag-->' + result.InterfaceResult.ETag);
                            Parts.push({ PartNumber: n, ETag: result.InterfaceResult.ETag })
                            start++
                            if (start <= count) uploadPart(start)
                            if (callback) callback()
                            if (n === count) { // 最后一段
                                _self.mergeSection(obsClient, UploadId, Parts, fileFullUrl, file, sucCallBack, failCallBack)
                            }
                        }
                    }
                })
            }
            // 上传段
            uploadPart(start)
        },
        mergeSection (obsClient, UploadId, Parts, fileFullUrl, file, sucCallBack, failCallBack) { // 合并段
            var _self = this
            let fileName = file.file.name // 文件名-带后缀
            const size = file.file.size // 文件大小 B
            var index = fileName.lastIndexOf('/')
            fileName = fileName.substring(
                index + 1,
                fileName.length
            )
            const arr = fileName.split('.')
            arr && arr.splice(arr.length - 1, 1)
            const name = arr && arr.join('.') // 文件名-不带后缀
            const url = this.huaweiyunConfig.viewPath + fileFullUrl // 完整url

            obsClient.completeMultipartUpload({
                Bucket: _self.huaweiyunConfig.bucketName,
                Key: fileFullUrl,
                // 设置Upload ID
                UploadId: UploadId,
                Parts: Parts
            }, function (err, result) {
                if (err) {
                    console.log('Error-->' + err)
                    if (failCallBack) failCallBack()
                } else {
                    // console.log('Status-->' + result.CommonMsg.Status)
                    if (sucCallBack) sucCallBack({ name: fileName, fileName: name, url: url, size: size })
                }
            })
        }

页面应用:

this.createInitTask(file, fileFullUrl, (obj) => {
    that.fileList = []
    that.fileList.push({ name: obj.fileName, appendixName: obj.name, appendixUrl: obj.url, size: obj.size })
    that.batchUploadWorkFilesAjax(that.fileList)
}, () => { that.btnLoading = false })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现vue3分段视频到华为云obs,你可以按照以下步骤操作: 1. 在vue3项目中引入obs-sdk-js库,用于连接华为云obs服务。 2. 创建一个上对象,设置上参数,如上文件名、文件大小等。 3. 将上文件分段,每个分段大小为1MB-5MB,使用obs-sdk-js库的putObject接口上每个分段。 4. 当所有分段完成后,使用obs-sdk-js库的completeMultipartUpload接口合并所有分段。 以下是一个简单的代码示例: ``` import OBS from 'obs-sdk-js' const obs = new OBS({ access_key_id: 'your_access_key_id', secret_access_key: 'your_secret_access_key', server: 'obs.cn-north-1.myhuaweicloud.com' }) async function uploadVideo(file) { const objectName = file.name const fileSize = file.size const partSize = 5 * 1024 * 1024 // 5MB const parts = Math.ceil(fileSize / partSize) // Step 1: Initiate multipart upload const { uploadId } = await obs.initiateMultipartUpload({ Bucket: 'your_bucket_name', Key: objectName }) // Step 2: Upload all parts const partPromises = [] for (let i = 0; i < parts; i++) { const start = i * partSize const end = Math.min(start + partSize, fileSize) const partNumber = i + 1 const partData = file.slice(start, end) const partPromise = obs.uploadPart({ Bucket: 'your_bucket_name', Key: objectName, PartNumber: partNumber, UploadId: uploadId, Body: partData }) partPromises.push(partPromise) } await Promise.all(partPromises) // Step 3: Complete multipart upload await obs.completeMultipartUpload({ Bucket: 'your_bucket_name', Key: objectName, UploadId: uploadId }) console.log('Video uploaded successfully!') } ``` 在上面的代码中,我们首先初始化了一个OBS对象,然后在uploadVideo函数中,我们使用initiateMultipartUpload接口创建一个分段的任务,并获取到任务的uploadId。然后,我们将上文件分成多个大小相同的分段,使用uploadPart接口上每个分段。最后,当所有分段完成后,我们使用completeMultipartUpload接口合并所有分段。 注意,上面的代码示例仅供参考,具体实现可能需要根据你的项目需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值