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