前端js华为云obs上传下载文件与进度条的设置

前端js华为云obs上传下载文件与进度条的设置

首先下载OBS BrowserJS SDK安装包
用git将代码拉到本地

git clone https://github.com/huaweicloud/huaweicloud-sdk-browserjs-obs.git

下载到本地安装依赖

npm install

安装依赖完成后可以看到其中包含examples文件夹（示例代码），dist文件夹（SDK库文件）。在所需要用的页面中引入dist/@cloud/esdk-obs-browserjs-without-polyfill-3.21.8.min.js该文件（不限版本）

<script src='./esdk-obs-browserjs-without-polyfill-3.21.8.min.js'></script>

vue项目中可这样引入，将文件放入指定位置

import ObsClient from "@/assets/js/esdk-obs-browserjs-without-polyfill-3.21.8.min.js"

然后就可以进行华为云OBS对象存储服务了

创建ObsClient实例

var obsClient = new ObsClient({
 access_key_id: '*** Provide your Access Key ***', 
 secret_access_key: '*** Provide your Secret Key ***', 
 server : 'https://your-endpoint'
 timeout: 3000, // 设置超时时间
});

文本上传

文本上传用于直接上传字符串。

obsClient.putObject({
 Bucket : 'bucketname',
 Key : 'objectname',
 Body : 'Hello OBS'
}, function (err, result) {
 if(err){
 console.error('Error-->' + err);
 }else{
 console.log('Status-->' + result.CommonMsg.Status);
 }

将指定待上传的字符串放入Body参数。

文件上传

文件上传使用本地文件作为对象的数据源。

obsClient.putObject({
 Bucket : 'bucketname',
 Key : 'objectname',
 SourceFile : document.getElementById('input-file').files[0]
}, function (err, result) {
 if(err){
 console.error('Error-->' + err);
 }else{
 console.log('Status-->' + result.CommonMsg.Status);
 }
});

SourceFile：指定待上传的文件，必需是File对象或者Blob对象。
SourceFile和Body不可同时使用。
上传的内容不可超过5GB

获取上传进度

文件过大时，需要进度条来提醒用户文件上传进度

var callback = function(transferredAmount, totalAmount, totalSeconds){
 // 获取上传平均速率（KB/S）
 console.log(transferredAmount * 1.0 / totalSeconds / 1024);
 // 获取上传进度百分比
 console.log(transferredAmount * 100.0 / totalAmount);
};
obsClient.putObject({
 Bucket : 'bucketname',
 Key : 'objectname',
 SourceFile : document.getElementById('input-file').files[0]
 ProgressCallback: callback 
}, function (err, result) {
 if(err){
 console.error('Error-->' + err);
 }else{
 console.log('Status-->' + result.CommonMsg.Status);
 }
});

进度条的设置

<div
  v-for="item in progressArray"
  :key="item.fileUuid"
>
  <el-progress
    :text-inside="true"
    :stroke-width="16"
    :percentage="item.value"
  ></el-progress>
  <span class="filename-m">{{ item.name }}</span>
</div>

// 在文件上传中的callback中
var callback = function(transferredAmount, totalAmount, totalSeconds){
 // 获取上传平均速率（KB/S）
 console.log(transferredAmount * 1.0 / totalSeconds / 1024);
 // 获取上传进度百分比
 console.log(transferredAmount * 100.0 / totalAmount);
 let process = parseInt(transferredAmount * 100 / totalAmount)
 let index = this.progressArray.findIndex(v => v.uid == file.uid)
 if (index == -1) {
     _this.progressArray.push({
         value: process,
         uid: file.uid,
         name: file.name
     })
 } else {
     if (this.progressArray[index].value != process) {
         this.progressArray[index].value = process;
     }
 }
};

// 文件上传失败或成功后清空进度条
var clearProgress = function(this) {
  this.progressArray.splice(0,1)
}

文本下载

其中Key代表文件的唯一标识，下载对应文件时，Key需保持一致

obsClient.getObject({ 
 Bucket : 'bucketname', 
 Key : 'objectname'
}, function (err, result) { 
 if(err){ 
 console.error('Error-->' + err); 
 }else{ 
 console.log('Status-->' + result.CommonMsg.Status); 
 if(result.CommonMsg.Status < 300 && result.InterfaceResult){
 // 读取对象内容
 console.log('Object Content:'); 
 console.log(result.InterfaceResult.Content); 
 }
 }

文本下载方式下载返回结果中的result.InterfaceResult.Content是一个string对象。

二进制下载

obsClient.getObject({ 
 Bucket : 'bucketname', 
 Key : 'objectname', 
 SaveByType : 'arraybuffer'
}, function (err, result) { 
 if(err){ 
 console.error('Error-->' + err); 
 }else{ 
 console.log('Status-->' + result.CommonMsg.Status); 
 if(result.CommonMsg.Status < 300 && result.InterfaceResult){ 
 // 读取对象字节长度
 console.log('Object Length:\n'); 
 console.log(result.InterfaceResult.Content.byteLength); 
 }
 }

设置SaveByType为‘arraybuffer’指定使用二进制式下载。
二进制式下载方式下返回结果中的InterfaceResult.Content是一个arraybuffer对象。

文件下载

obsClient.getObject({
 Bucket : 'bucketname',
 Key : 'objectname',
 SaveByType : 'file'
}, function (err, result) {
 if(err){
 console.error('Error-->' + err);
 }else{
 console.log('Status-->' + result.CommonMsg.Status);
 if(result.CommonMsg.Status < 300 && result.InterfaceResult){
 // 获取下载对象的路径
 console.log('Download Path:'); 
 console.log(result.InterfaceResult.Content.SignedUrl); 
 }
 }
});

设置SaveByType为’file’生成下载路径。

https://support.huaweicloud.com/sdk-browserjs-devg-obs/obs_24_0001.html
https://support.huaweicloud.com/sdk-browserjs-devg-obs/obs_24_0001.html