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

总结
文件读写权限
Web直传阿里云Oss踩坑总结_第1张图片
读写权限改为公共读
跨域访问
Web直传阿里云Oss踩坑总结_第2张图片
跨域访问设置

你可能感兴趣的