阿里oss文件上传

开发阶段用的是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