华为云文件上传（单个上传和分段上传）

首先引入静态文件：

华为云官网提供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 })
            }
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

页面应用：

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})
1
2
3

二：分段上传

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 })
                }
            })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

页面应用：

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 })
1
2
3
4
5