前端 华为OBS 上传图片和查看图片

前提是OBS  使用的是SDK BrowserJS 

下载SDK BrowserJS   

1 前提 npm config set registry  https://registry.npmjs.org

2 esdk-obs-browserjs  3.20.7  

上传图片两种方式

1  普通的上传

// 创建ObsClient实例
var obsClient = new ObsClient({
    access_key_id: '*** Provide your Access Key ***',       
    secret_access_key: '*** Provide your Secret Key ***',       
    server : 'https://your-endpoint'
});

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);
       }
});

2，使用授权的方式 上传  npm  axios

// 创建ObsClient实例
var obsClient = new ObsClient({
       access_key_id: '*** Provide your Access Key ***',
       secret_access_key: '*** Provide your Secret Key ***',
       server : 'http://your-endpoint'
});
// 使用PUT请求上传对象
var bucketName = 'bucketname';
var objectKey = 'objectname';
var method = 'PUT';
var headers = {
       'Content-Type' : 'text/plain'
}
var res = obsClient.createSignedUrlSync({
       Method : method,
       Bucket : bucketName,
       Key : objectKey,
       Expires : 3600,
       Headers : headers
});
var content = 'Hello OBS';

var reopt = {
       method : method,
       url : res.SignedUrl,
       withCredentials: false, 
       headers : res.ActualSignedRequestHeaders || {},
       validateStatus: function(status){
              return status >= 200;
       },
       maxRedirects : 0,
       responseType : 'text',
       data : content,
};

axios.request(reopt).then(function (response) {
       if(response.status < 300){                     
              console.log('Creating object using temporary signature succeed.');              
       }else{                     
              console.log('Creating object using temporary signature failed!');                     
              console.log('status:' + response.status);                     
              console.log('\n');              
       }              
       console.log(response.data);              
       console.log('\n');
}).catch(function (err) {
       console.log('Creating object using temporary signature failed!');       
       console.log(err);       
       console.log('\n');
});

3，访问图片

A，当桶是公有读的情况，直接拼接url就可以直接访问

B，当桶是私有的情况，直接拼接url是访问不了的，要使用授权上传的方式上传图片，并且要调一个下载的接口才可以访问图片，在调之前要设置下cors ，具体配置可以看华为的文档

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

// 创建ObsClient实例
var obsClient = new ObsClient({
       access_key_id: '*** Provide your Access Key ***',
       secret_access_key: '*** Provide your Secret Key ***',
       server : 'http://your-endpoint'
});

// 使用GET请求下载对象
var bucketName = 'bucketname';
var objectKey = 'objectname';
var method = 'GET';

var res = obsClient.createSignedUrlSync({
       Method : method,
       Bucket : bucketName,
       Key : objectKey,
       Expires : 3600,
});

var reopt = {
       method : method,
       url : res.SignedUrl,
       withCredentials: false, 
       headers : res.ActualSignedRequestHeaders || {},
       validateStatus: function(status){
              return status >= 200;
       },
       maxRedirects : 0,
       responseType : 'text',
};

axios.request(reopt).then(function (response) {
       if(response.status < 300){                     
              console.log('Getting object using temporary signature succeed.');              
       }else{                     
              console.log('Getting object using temporary signature failed!');                     
              console.log('status:' + response.status);                     
              console.log('\n');              
       }              
       console.log(response.data);              
       console.log('\n');
}).catch(function (err) {
       console.log('Getting object using temporary signature failed!');       
       console.log(err);       
       console.log('\n');
});