Web直传阿里云Oss踩坑总结

SDK安装

浏览器中使用 直接引入

引入后就可以使用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 = '';
        $.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是否存在再进行上传，个人感觉不太可行。。。
文件重名覆盖这个问题还有待解决，现在功能上是管用了，可以进行正常上传，读取，哪位大牛有更好的解决方案可以分享下~~~

总结

文件读写权限

读写权限改为公共读

跨域访问

跨域访问设置