Web直传OSS

最近公司需求，前端直接传图片到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/${new Date().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);

  }
});

欢迎关注Coding个人笔记 公众号