阿里oss文件上传

开发阶段用的是js直传,没有使用sts.

在阿里客户端设置好 accessKeyIdaccessKeySecretbucket

解决跨域,进行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

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Irene1991

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值