1
OBS
下载和初始化
桶
环境搭建
客户端下载
安装SDK
初始化
上传
普通上传
参数
切片上传
参数
回调函数
断点续传
参数
下载
下载和初始化 桶
桶(Bucket)是OBS中存储对象的容器 每个桶都有⾃⼰的存储类别、访问权限、所属区域等属性,⽤户可以在不同区域创建不同存储类别和访问权 限的桶,并配置更多⾼级属性来满⾜不同场景的存储诉求 桶名必须是全局唯⼀的且不能修改
环境搭建
OBS服务环境搭建_对象存储服务 OBS_BrowserJS_快速入门_华为云
客户端下载
下载OBS Browser+_对象存储服务 OBS_OBS Browser+_华为云
安装SDK
1. npm install esdk-obs-browserjs
2. 下载sdk https://github.com/huaweicloud/huaweicloud-sdk-browserjs-obs/releases
初始化
this.obsClient = new ObsClient({
access_key_id: '', // AK:Access Key ID,接⼊键标识,⽤户在对象存储服务系统中的
接⼊键标识,⼀个接⼊键标识唯⼀对应⼀个⽤户,⼀个⽤户可以同时拥有多个接⼊键标识。对象存储服
务系统通过接⼊键标识识别访问系统的⽤户。
secret_access_key: '', // SK:Secret Access Key,安全接⼊键,⽤户在对象存储服务
系统中的安全接⼊键,是⽤户访问对象存储服务系统的密钥,⽤户根据安全接⼊键和请求头域⽣成鉴权
信息。安全接⼊键和接⼊键标识⼀⼀对应。
server: '' // 服务地址
})
夹1 / ⽂件夹2 / ... / ⽂件名 ⽂件的 url 地址 3. SourceFile: 上传的⽂件 4. ACL 默认权限:私有读写。不能通过 url 直接打开,需要另外调⽤下载的 API 下载查看 管理桶访问权限类型 https://support.huaweicloud.com/sdk-browserjs-devgobs/obs_24_0404.html 上
generalUpload() {
const _this = this
_this.obsClient.putObject({
Bucket: '桶名', // 桶名
Key: _this.file.url, // 唯⼀,url 地址
SourceFile: _this.file, // 待上传⽂件
/** 权限设置
* 默认是不可读写的,不能直接⽤ url 打开,需要另外调⽤下载的 api
*/
ACL: _this.obsClient.enums.AclPublicRead
}, function(err, result) {
if (err) {
_this.$message.error('上传失败')
console.error('Error-->' + err)
} else {
_this.file.uploading = false
_this.file.percent = 100
_this.file.fileUrl = 'http://obs-yfxmgl.obs.cn-east-213.huaweiha
iercloud.com/' + _this.file.url
_this.updateList()
}
})
}
切片上传
1. 同上 2. 新增 PartSize 参数 设置源⽂件中分段的⼤⼩ 单位为字节 ⼤⼩范围是100KB~5GB 1. ProgressCallback :获取上传进度的回调函数 已上传的字节数、总字节数、已使⽤的时间(单位:秒) 2. EventCallback: 获取上传事件的回调函数 事件类型,事件参数,事件结果 3. ResumeCallback:获取断点续传控制参数的回调函数 取消断点续传上传任务控制参数,断点续传记录对 切⽚上传
sliceUpload(file) {
let cp
let hook
const _this = this
let testUpload = {}
if (localStorage.getItem('testUpload')) {
testUpload = JSON.parse(localStorage.getItem('testUpload'))
}
this.file.uploading = true
this.updateList()
this.obsClient.uploadFile({
Bucket: '桶名',
Key: file.url,
SourceFile: file,
ACL: _this.obsClient.enums.AclPublicRead,
/** 设置源⽂件中分段的⼤⼩
* 单位为字节
* ⼤⼩范围是100KB~5GB
*/
PartSize: 9 * 1024 * 1024,
// 获取上传进度的回调函数
ProgressCallback: function(transferredAmount, totalAmount, totalSe
conds) {
_this.file.percent = Number((transferredAmount * 100.0 / totalAm
ount).toFixed(2))
_this.updateList()
},
EventCallback: function(eventType, eventParam, eventResult) {
// 处理事件响应
// 每⼀⽚上传完毕后会回调改函数
if (eventType === 'uploadPartSucceed') {
testUpload[file.name] = cp
localStorage.setItem('testUpload', JSON.stringify(testUpload))
}
},
ResumeCallback: function(resumeHook, uploadCheckpoint) {
// 获取取消断点续传上传任务控制参数
hook = resumeHook
cp = uploadCheckpoint
testUpload[file.name] = cp
localStorage.setItem('testUpload', JSON.stringify(testUpload))
}
}, function(err, result) {
// console.error('Error-->' + err)
// 出现错误,再次调⽤断点续传接⼝,继续上传任务
_this.file.uploading = false
_this.updateList()
if (err) {
hook.cancel()
_this.$message.error('上传失败')
_this.file.uploading = false
_this.updateList()
} else {
console.log('Status-->' + result.CommonMsg.Status)
if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
console.log('RequestId-->' + result.InterfaceResult.RequestId)
_this.successCallback(testUpload, file)
}
}
})
},
UploadCheckpoint
断点续传
参数