oss web直传

Posted 梦想远航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了oss web直传相关的知识,希望对你有一定的参考价值。

签名信息

auth.php

<?php
function gmt_iso8601($time) {
    $dtStr = date("c", $time);
    $mydatetime = new DateTime($dtStr);
    $expiration = $mydatetime->format(DateTime::ISO8601);
    $pos = strpos($expiration, ‘+‘);
    $expiration = substr($expiration, 0, $pos);
    return $expiration."Z";
}
//阿里云官方提供的秘钥
$id= ‘6MKOqxGiGU4AUk44‘;
$key= ‘ufu7nS8kS59awNihtjSonMETLI0KLy‘;
$host = ‘http://post-test.oss-cn-hangzhou.aliyuncs.com‘;

$now = time();
$expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间,将不能访问
$end = $now + $expire;
$expiration = gmt_iso8601($end);

$dir = ‘user-dir/‘;

//最大文件大小.用户可以自己设置
$condition = array(0=>‘content-length-range‘, 1=>0, 2=>1048576000);
$conditions[] = $condition;

//表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = array(0=>‘starts-with‘, 1=>‘$key‘, 2=>$dir);
$conditions[] = $start;


$arr = array(‘expiration‘=>$expiration,‘conditions‘=>$conditions);

$policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$string_to_sign = $base64_policy;
$signature = base64_encode(hash_hmac(‘sha1‘, $string_to_sign, $key, true));

$response = array();
$response[‘accessid‘] = $id;
$response[‘host‘] = $host;
$response[‘policy‘] = $base64_policy;
$response[‘signature‘] = $signature;
$response[‘expire‘] = $end;
//这个参数是设置用户上传指定的前缀
$response[‘dir‘] = $dir;

$response[‘code‘]=1;

echo json_encode([‘data‘=>$response,‘status‘=>1]);

web端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div>
    <input type="hidden"  > <img src="" style="width: 200px;height: 100px; display: none">
    <input type="file" name="upfile" accept="image/*" >
</div>


<script type="text/javascript">
    var expire =0;
     sign_obj=‘‘;
    var serverUrl=auth.php;
    $(function () {
        $("div").on("change",input[type="file"],function(evt){
            $this=$(this);
            var files = evt.target.files;
            var file=files[0];
            if(file.size > 10*1024*1024 ){
                alert(too big);
                return false;
            }
            get_signature();
            if(sign_obj == ‘‘) {
                alert(sign_obj);
               alert(签名error,请重试);
                return false;
            }

            var g_object_name=sign_obj.dir+random_string()+get_suffix(file.name);
            var request = new FormData();
            request.append("OSSAccessKeyId",sign_obj.accessid);//Bucket 拥有者的Access Key Id。
            request.append("policy",sign_obj.policy);//policy规定了请求的表单域的合法性
            request.append("Signature",sign_obj.signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
            request.append("key",g_object_name);//文件名字,可设置路径
            request.append("success_action_status",200);// 让服务端返回200,不然,默认会返回204
            request.append(x-oss-object-acl, public-read);
            request.append(file, file);
            $.ajax({
                url : sign_obj.host,  //上传阿里地址
                data : request,
                processData: false,//默认true,设置为 false,不需要进行序列化处理
                cache: false,//设置为false将不会从浏览器缓存中加载请求信息
                async: false,//发送同步请求
                contentType: false,//避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
                dataType: xml,//不涉及跨域  写json即可
                type : post,
                success : function(callbackHost, request) {     //callbackHost:success,request中就是 回调的一些信息,包括状态码什么的
                    var origin=sign_obj.host+/+g_object_name;
                    var src=origin;
                    $this.closest(div).find(img).attr(src, src).show();
                    $this.closest(div).find(.imgclose).show();
                },
                error : function(returndata) {
                    console.log("return data:"+returndata);
                    alert(上传图片出错啦,请重试)
                }
            });
        });
    })


    function random_string(len) {
        len = len || 32;
        var chars = ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678;
        var maxPos = chars.length;
        var pwd = ‘‘;
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function get_suffix(filename) {
        var pos = filename.lastIndexOf(.)
        var suffix = ‘‘
        if (pos != -1) {
            suffix = filename.substring(pos)
        }
        return suffix;
    }
    //获取签名信息
    function send_request()
    {
        var xmlhttp = null;
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp!=null)
        {
            xmlhttp.open( "GET", serverUrl, false );
            xmlhttp.send( null );
            return xmlhttp.responseText
        }
        else
        {
            alert("Your browser does not support XMLHTTP.");
        }
    }

    function get_signature()
    {
        //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
        now = timestamp = Date.parse(new Date()) / 1000;
        if (expire < now + 3)
        {
            var body = send_request();
            var obj =JSON.parse(body);
            if(obj.status ==1  && obj.data.code == 1){
                sign_obj= obj.data;
                expire= parseInt(sign_obj[expire]);
                return true;
            }

            return true;
        }
        return false;
    };


</script>

</body>
</html>

 

以上是关于oss web直传的主要内容,如果未能解决你的问题,请参考以下文章

在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现Web端直传,服务端签名直传并设置上传回调的实现流程

Ali OSS服务端签名直传并设置上传回调

Web直传阿里云OSS服务端临签名总结 2021-01-28

前端直传oss需要在oss配置域名权限吗

阿里云 OSS 网页端直传

前端直传oss