开发阶段用的是js直传,没有使用sts.
在阿里客户端设置好 accessKeyId,accessKeySecret,bucket。
解决跨域,进行bucket设置
- 将allowed origins设置成
*
- 将allowed methods设置成
PUT, GET, POST, DELETE, HEAD
- 将allowed headers设置成
*
- 将expose headers设置成
ETag
x-oss-request-id
跨域未设置会报403错误。
特别注意最后一步的头部信息暴露,忘记设置的话分片传输会失败。
OSS的错误码参考
https://www.alibabacloud.com/help/zh/doc-detail/32005.htm
html引用文件
<scriptsrc="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
html
<div>
<input class="newFile" type="file" data-class="newFreePlayContent"/>
<input type="hidden" name="newFreePlayContent" value="" class="newResourceId" data-name="" data-type=""/>
</div>
js
$(".newFile").on('change', function( e ){
//e.currentTarget.files 是一个数组,如果支持多个文件,则需要遍历
var inputElement=e.currentTarget;
var className=$(this).attr("data-class");
var name = e.currentTarget.files[0].name;
//console.log(name);
$(inputElement).parents("div").find("input[name='"+className+"']").attr("data-name",name);
var dataType=name.split(".")[1];
$(inputElement).parents("div").find("input[name='"+className+"']").attr("data-type",dataType);
var file = e.currentTarget.files[0];
var storeAs = e.currentTarget.value;
var client = new OSS.Wrapper({
region: '********',
accessKeyId: '********',
accessKeySecret: '**********',
bucket: '**********'
});
client.multipartUpload(storeAs, file).then(function (result){
//console.log(result);//返回对象
//console.log(result.url); //返回链接
if(result.url == undefined){
//图片的链接会直接返回,音视频的链接会嵌套的更深
result.url=result.res.requestUrls[0].split('?')[0];
}
$(inputElement).parents("div").find("input[name='"+className+"']").val(result.url);
parent.layer.msg("文件上传成功!");
}).catch(function (err) {
console.log(err);
parent.layer.msg("文件上传失败,请重试!");
});
});
参考信息
上传Object后如何获取访问URL
https://help.aliyun.com/knowledge_detail/39607.html
搭建STS Server 并从客户端获取临时授权信息
https://help.aliyun.com/document_detail/32069.html
JavaScript客户端签名直传
https://help.aliyun.com/document_detail/31925.html?spm=a2c4e.11155507.0.0.LYArFT