页面（前端）直传oss（layui.js 不走后端）

左手的ㄟ右手 2023-06-23 13:21 16阅读 0赞

**一、什么叫页面（前端）直传oss？**

文件（jpg，png，tif.....）上传，无非两种情况：一种走后端处理，再上传oss；还有就是今天要说的页面直接上传oss！

![说明][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9fbWFvX3hpYW9feXU_size_16_color_FFFFFF_t_70]

**二、准备工作   算了还是直接上代码吧！**

** 1、前端js代码**

/**
             * @remark  原File上传函数
             * @Time  19-8-23 15:23
             * @function fileUpload
             */
            
            var now = timestamp = Date.parse(new Date()) / 1000; 
            var expire = 0;
            var sign_obj='';
            var g_object_name ="";
            var infos;
            function fileUpload(file,e){
                    get_signature();
                    if(sign_obj == '') {
                       layer.msg('系统繁忙，请稍后', {icon: 2, time: 2000});
                       return false;
                    }
                    g_object_name=  sign_obj.key+guid()+e + 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中就是 回调的一些信息，包括状态码什么的
                               
                                infos = {
                                        oldname:file['name'],
                                        filesize:file['size'],
                                        type:file['type'],
                                        file:g_object_name,
                                };
                        },
                        error : function(returndata) {
    //                        console.log("return data:"+returndata);
                            layer.msg('系统出现异常，请稍后', {icon: 2, time: 2000});
                        }
                    });
                    return  JSON.stringify(infos);
                    
            }
            
            /*获取签名信息验证*/
            function get_signature(){
                //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下。3s 做为缓冲
                var  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;
            };
            /**
             * @remark 获取上传的sign
             * @Time 19-8-23 16:03
             */ 
            function send_request(){
                var xmlhttp = null;
                if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                }
                else if (window.ActiveXObject)
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlhttp!=null)
                {
                    var serverUrl = '/XXX/XXXXXX/getSignature';
                    xmlhttp.open( "GET", serverUrl, false );
                    xmlhttp.send( null );
                    return xmlhttp.responseText ;
                }else{
                    alert("您的浏览器不支持XMLHTTP，请换个浏览器上传");
                }
            };
            /**
             * @remark 获取文件后缀名
             * @function get_suffix
             * @Time  19-8-23 16:09
             */
            function get_suffix(filename) {
                var pos = filename.lastIndexOf('.')
                var suffix = ''
                if (pos != -1) {
                    suffix = filename.substring(pos)
                }
                return suffix;
            }
            /**
             * get  guid
             */
            function guid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                    return v.toString(16);
                });
            }

2、后端获取签名代码

public function ossFileUploadinfoCustom($dir){
                $id= config('oss.accessKeyId');
                $key= config('oss.accessKeySecret');
                $host = config('oss.host');
                $now = time();
                $expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问
                $end = $now + $expire;
                $expiration = gmt_iso8601($end);
                $dir = $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['key'] = $dir;
                $response['code']=1;
                return json_encode(['data'=>$response,'status'=>1]);
            }

3、对了，你得先设置oss的一些参数！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9fbWFvX3hpYW9feXU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219153915709.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9fbWFvX3hpYW9feXU=,size_16,color_FFFFFF,t_70