Web直传云存储OSS-526互联

前端直接传图片到OSS，一般我们都是传到服务器后台，然后由后台存储。这样其实有一些缺点，OSSAPI上面说：

1、上传慢。先上传到应用服务器，再上传到OSS，网络传送多了一倍。如果数据直传到OSS，不走应用服务器，速度将大大提升，而且OSS是采用BGP带宽，能保证各地各运营商的速度。

2、扩展性不好。如果后续用户多了，应用服务器会成为瓶颈。

3、费用高。由于OSS上传流量是免费的。如果数据直传到OSS，不走应用服务器，那么将能省下几台应用服务器。

在这边不得不吐槽一下OSS的API，是真的很烂，基本找不到好的方法，都是基于百度才做出来的，当然，我使用的方法估计还有一些坑，只是能实现了我的功能。

首先是引入OSS的SDK，本来使用npm安装，但是import失败，还是使用script引入。API上面直接new OSS，使用了，直接报错，要调用Wrapper方法。

let storeAs = `meichujia/newDate().getTime(){file.name}`;
var client = new OSS.Wrapper({
region: 'oss-cn-hangzhou',
accessKeyId: that.ossConfig.AccessKeyId,
accessKeySecret: that.ossConfig.AccessKeySecret,
stsToken: that.ossConfig.SecurityToken,
bucket: 'yp-images',  secure: true});

client.put(storeAs, buffer).then(function (result) {  console.log(result);
}).catch(function (err) {
  console.log(err);
});

storeAs：存储的路径和名字。

Region：地区选择，默认这个。

accessKeyId、accessKeySecret、stsToken：临时凭证，后台获取。

Bucket：上传的位置。

Secure：（很重要）允许HTTPS，因为这个原因花了好长时间。

client.put：方法，还有一个multipartUpload方法，只能传file对象，因为要压缩，压缩后变成blob对象上传不了，我写的测试put方法blob对象也无法上传，要转成buffer对象才能上传。

成功后有回调函数，就可以在回调函数里面操作了。

附上压缩图片方法：file：文件对象，quality：0-1，压缩质量，fn:回调函数，也就是blob对象

fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })

  function filetoDataURL(file,fn){
    var reader = new FileReader();
    reader.onloadend = function(e){
      fn(e.target.result);
    };
    reader.readAsDataURL(file);
  }

  function dataURLtoImage(dataurl,fn){
    var img = new Image();
    img.onload = function() {
      fn(img);
    };
    img.src = dataurl;
  }

 function canvasResizetoFile(canvas,quality,fn){
    canvas.toBlob(function(blob) {
      fn(blob);
    },'image/jpeg',quality);
  }

  function imagetoCanvas(image){
    var cvs = document.createElement("canvas");
    var ctx = cvs.getContext('2d');
    cvs.width = image.width;
    cvs.height = image.height;
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
    return cvs ;
  }
}
直接调用
fileResizetoFile(file, 0.1, (res) => {
//res就是压缩后的blob对象
  var buffer = '';
  // blob转ArrayBuffer
  var reader = new FileReader();
  reader.readAsArrayBuffer(res);
  reader.onload = function (event) {
    // 转Buffer
    buffer = new OSS.Buffer(event.target.result);
  }
});