SDK安装
浏览器中使用 直接引入
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
引入后就可以使用oss.wrapper对象
var client = new OSS.Wrapper({
region: '实例所在的地理位置（我这里写的是控制台中的EndPoint）',
//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
accessKeyId: '填写自己阿里云账户的acessKeyId',
accessKeySecret: '填写自己阿里云账户的accessKeySecret',
stsToken: '这里我未填写 直接注释掉',
bucket: '在oss后台创建的bucket'
});
配置项到此结束
下面贴上我自己的上传图片代码
document.getElementById('file_upload').addEventListener('change',function(e){
var file=e.target.files[0];
var storeAs="qmai_user_icon/"+file.name;
//这里file.name前面的是上传oss的文件夹名（一定要带'/'）
client.multipartUpload(storeAs, file).then(function (result) {
var myurl='http://qmaiupload.oss-cn-beijing.aliyuncs.com/'+result.name
//这里有个坑，不知道为什么，当我上传大于100K的文件时，回调就没有url，但是在oss上面是确实上传上去了
//客户端暂时用固定的阿里云url拼接文件名访问url（这样做有个问题，先往下看）
var url = '<?php echo base_url('接口存放url'); ?>';
$.ax({
url: url,
data: {
'u_icon': myurl + '?t=' + Math.random()
},
callback: function (data) {
console.log(data)
var json = JSON.parse(data);
var results;
if (json.code == 200) {
results = 'success';
} else {
results = 'error';
}
$(".user_icon").attr("src", myurl + '?t=' + Math.random());
//请求成功后再img标签插入url达到上传成功预览效果
$.tips({
result: results,
message: json.message
});
}
});
}).catch(function (err) {
console.log(err);
});
})
遗留问题
有个问题是，在oss上传同名但内容不同的文件时，后上传的文件会覆盖掉前上传的文件，这个问题我咨询了阿里官方，下面是他们的回复：
同名文件oss回复
当然是有解决办法的
1.可以通过程序来实现唯一文件名，这就和我上面说的问题冲突了，如果选择用唯一文件名（文件名+随机数或时间戳），那么就无法读取到100k以上的文件。。。这里应该是我的原因，第一次用，很多东西没搞太懂，所以权衡利弊之后选择不规定唯一文件名
2.阿里给的第二种解决方法是上传前检查object是否存在再进行上传，个人感觉不太可行。。。
文件重名覆盖这个问题还有待解决，现在功能上是管用了，可以进行正常上传，读取，哪位大牛有更好的解决方案可以分享下~~~
总结
文件读写权限
读写权限改为公共读
跨域访问
跨域访问设置
