layui OSS Web直传

此次封装的oss直传 使用的是官网Browser.js和layui结合封装的插件。调用方式相对来说简单快捷

1、html是一个上传按钮。这里注意一下两个id，

　　id="upload-normal" ：上传按钮的id。

　　id="upload-normal-list"：上传完图片（文件）展示的地方

　　这两个是有规则的，必须为上传按钮的id 拼接上 -list

 

.close_btn{ position: absolute; top:-7px!important; right: -7px!important; background: rgba(0,0,0,0.5); border-radius: 50%; width: 15px; height: 15px; border-radius: 50%; line-height: 15px;}

    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm" id="upload-normal">上传图片</button>
                <div class="layui-upload-list" id="upload-normal-list" style="display: flex; flex-wrap: wrap;">
                </div>
            </div>
        </div>
    </div>

2、js

     首先去官网下载sdk并按照文档引入js

　 官方链接：https://helpcdn.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1218.4d8b23f2hNmYrh

　 封装后的js（注意最好使用layui2.6.5及以上版本 因为他这个版本修复了（这个版本之前的自己去修改下layui.js）

• [修复] form 组件的 name="arr[]" 在元素动态插入后出现序号异常的问题

　　

<script src="src/lib/extend/aliyun-oss-sdk.min.js"></script>

layui.extend({}).define(['layer', 'upload', 'setter', 'jquery'], function (exports) {
    var $ = layui.$,
        layer = layui.layer,
        setter = layui.setter,
        upload = layui.upload,
        layer = layui.layer;

    var Class = function (options) {
        var that = this;
        that.options = options;
        that.init();
    };

    Class.prototype.init = function () {
        var that = this,
            options = that.options;

        if (!that.strIsNull(that.options.fileType)) {
            fileType = that.options.fileType;
        } else {
            fileType = 'file';
        }

        if (typeof that.options.uploadRenderData != 'undefined') {
            uploadRenderData = that.options.uploadRenderData;
        } else {
            uploadRenderData = {};
        }



        var loadingIndex;
        var uploadRender = upload.render($.extend({
            elem: that.options.elm,
            accept: fileType,
            multiple: that.options.multiple,
            auto: false,
            number: that.options.number ? that.options.number : 0,
            choose: function (obj) {

                uploadRender.config.elem.next()[0].value = '';
                let d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate();
                var folder = that.options.folder ? that.options.folder : 'default';
                var save_path = folder + '/' + year + '/' + month + day + '/';
                let admin_info = layui.data(setter.tableName).admin;

                let curFiles = obj.pushFile();
                var file_length = Object.keys(curFiles).length;

                //loading层
                loadingIndex = layer.load(2, { //icon支持传入0-2
                    shade: [0.5, '#000'], //0.5透明度的灰色背景
                    content: '上传中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '39px',
                            'width': '60px'
                        });
                    }
                });

                obj.preview(function (index, file, result1) {
                    var size = file.size;
                    var file_name = file.name;
                    var file_type = file.type;

                    let index1 = file_name.lastIndexOf('.');
                    let file_ext = file_name.substring(index1);

                    var code = "";
                    for (var i = 0; i < 6; i++) {
                        var radom = Math.floor(Math.random() * 10);
                        code += radom;
                    }
                    var save_name = d.getTime() + code + file_ext;
                    var storeAs = save_path + save_name;

                    var max_size = that.options.max_size ? that.options.max_size : 100 * 1024 * 1024;
                    if (size > max_size) {
                        layer.msg('上传的文件大小超出限制', { icon: 5 });
                        layer.close(loadingIndex);
                        return false;
                    }

                    //组装传输的参数，上传后阿里云会带着这些参数访问回掉方法
                    let data_param = {
                        uid: admin_info.uid,        //后台操作uid
                        filename: file_name,        //文件名称
                        filesize: size,            //文件大小
                        file_type: file_type,        //文件类型
                        file_ext: file_ext,        //文件文件后缀
                        save_name: save_name,        //阿里云的保存名称
                        save_path: save_path,        //阿里云的保存路径
                        all_path: storeAs,            //阿里云全路径
                    };

                    //上传
                    OSS.urllib.request('获取你签名的后台地址', { method: 'GET'}, (err, response) => {


                        if (err) {
                            return alert(err);
                        }
                        try {
                            result = JSON.parse(response);
                        } catch (e) {
                            return alert('parse sts response info error: ' + e.message);
                        }
                        let client = new OSS({
                            accessKeyId: result.data.AccessKeyId,
                            accessKeySecret: result.data.AccessKeySecret,
                            stsToken: result.data.SecurityToken,
                            // region表示您申请OSS服务所在的地域，例如oss-cn-hangzhou。
                            region: '',
                            bucket: ''
                        });

                        //记录断点
                        if (!tempCheckpoint) {
                            var tempCheckpoint;
                        }
                        // storeAs可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
                        // file可以自定义为File对象、Blob数据以及OSS Buffer。
                        client.multipartUpload(storeAs, file, {
                            progress: async function (p, checkpoint) {
                                tempCheckpoint = checkpoint;
                            },
                            parallel: that.options.parallel ? that.options.parallel : 1,
                            partSize: that.options.partSize ? that.options.partSize : 102400,
                            checkpoint: tempCheckpoint,
                            callback: {
                                url: setter.callback_api_url + '/admin/CommonOss/callbackFile',
                                body: 'bucket=${bucket}&object=${object}&imageInfo.height=${imageInfo.height}&imageInfo.width=${imageInfo.width}&param=${x:param}',
                                contentType: 'application/x-www-form-urlencoded',
                                customValue: {
                                    'param': JSON.stringify(data_param)
                                }
                            },
                        }).then(function (result) {

                            var list_id = that.options.elm + '-list';

                            var orgin_res = result.data.data;
                            if (!orgin_res) {
                                layer.msg('上传失败', { icon: 5, time: 1500 });
                                layer.close(loadingIndex);
                            }

                            var img_type = '';
                            var image_type = orgin_res.file_type;
                            img_type = image_type.split('/')[0];

                            html = '';
                            html1 = '';
                            attach_name = that.options.attach_name ? that.options.attach_name : '';
                            if (that.options.multiple) {
                                html1 += '<input type="hidden" name="' + attach_name + '[]" value="' + orgin_res.attach_id + '">';
                            } else {
                                html1 += '<input type="hidden" name="' + attach_name + '" value="' + orgin_res.attach_id + '">'
                            }


                            if (img_type == 'image') {

                                html += '<div style="position:relative;  100px; margin:0 10px 10px 0;">' +
                                    '<img src="' + orgin_res.full_path + '" alt="" width="100"  class="view_btn">' +
                                    '<i class="layui-icon close_btn close_blog" close="">ဆ</i>' + html1 +
                                    '</div>';

                            } else if (img_type == 'video') {

                                html += '<div style="position:relative;  150px; margin:0 10px 10px 0;">' +
                                    '<video src="' + orgin_res.full_path + '" width="150" controls="controls"></video>' +
                                    '<i class="layui-icon close_btn close_blog" close="">ဆ</i>' + html1 +
                                    '</div>';
                            } else {

                                html += '<div>' +
                                    '<a href="' + orgin_res.full_path + '">' + orgin_res.filename + '</a>' +
                                    '<span class="close_blog" style="margin-left: 15px;color:red; cursor:pointer">删除</span>' + html1 +
                                    '</div>';
                            }



                            if (that.options.multiple) {
                                $(list_id).append(html);
                            } else {
                                $(list_id).html(html);
                            }

                            if (Object.keys(curFiles).length > 0) {
                                delete curFiles[index]
                                file_length--
                                if (file_length == 0) {
                                    layer.close(loadingIndex);
                                }
                            }



                        }).catch(function (err) {
                            console.log(err);
                            layer.msg('上传失败', { icon: 5, time: 1500 });
                            layer.close(loadingIndex);
                        });
                    });

                });
            }

        }), uploadRenderData);

    };



    Class.prototype.strIsNull = function (str) {
        if (typeof str == "undefined" || str == null || str == "")
            return true;
        else
            return false;
    };

    var aliossUpload = {
        render: function (options) {
            var inst = new Class(options);
            return inst;
        }
    };


    $(document).on('click', ".close_blog", function () {
        $(this).parent().remove();
    });

    $(document).on('click', ".view_btn", function () {
        var attach_url = $(this)[0].src
        window.open(attach_url);
    });

    exports('aliossUpload', aliossUpload);


})

3、调用方式

　　

layui.define(['jquery','upload', 'form', 'aliossUpload'], function (exports) {
        var $ = layui.jquery
            , aliossUpload = layui.aliossUpload

        aliossUpload.render({
            elm: '#upload-normal',  //上传按钮id
            fileType: 'images',        //限制上传类型
            multiple: false,        //单图or 多图
            attach_name:'image',    //上传input的name值
            folder: 'slide',        //上传oss目录
            number: 1               //设置同时可上传的文件数量，一般配合 multiple 参数出现。0（即不限制）
        });

    exports('slide_upload', {})
});

以上是前端上传的代码及调用方式。接下来稍微简单说一下后代返回的签名及上传回调

   你可以使用官网php的sdk，也可以用composer安装

　我使用的是composer

   composer require aliyunsts/aliyun-sts

  1、 获取签名代码：

    public function sts()
    {
        $config = config("aliyun.oss_sts");
        $AccessKeyID = $config['AccessKeyID'];
        $AccessKeySecret = $config['AccessKeySecret'];
        $roleArn = $config['RoleArn'];
        $RoleSessionName = $config['RoleSessionName'];
        $tokenExpire = $config['DurationSeconds'];
        $policy = $this->_getPolicy();

        $iClientProfile = DefaultProfile::getProfile("cn-beijing", $AccessKeyID, $AccessKeySecret);
        $client = new DefaultAcsClient($iClientProfile);
        $request = new AssumeRoleRequest();
        $request->setRoleSessionName($RoleSessionName);
        $request->setRoleArn($roleArn);
        $request->setPolicy($policy);
        $request->setDurationSeconds($tokenExpire);
        $response = $client->doAction($request);

        $rows = array();
        $body = $response->getBody();
        $content = json_decode($body);
        $rows['status'] = $response->getStatus();
        if ($response->getStatus() == 200) {
            $rows['AccessKeyId'] = $content->Credentials->AccessKeyId;
            $rows['AccessKeySecret'] = $content->Credentials->AccessKeySecret;
            $rows['Expiration'] = $content->Credentials->Expiration;
            $rows['SecurityToken'] = $content->Credentials->SecurityToken;
            return $this->jsonSuccess($rows);
        }
        return $this->jsonError($content->Message);
    }

 2、aliyun文件回调

public function callbackFile()
    {
        $is_success = false;
        try {
            // 1.获取OSS的签名header和公钥url header
            $authorizationBase64 = "";
            $pubKeyUrlBase64 = "";
            /*
             * 注意：如果要使用HTTP_AUTHORIZATION头，你需要先在apache或者nginx中设置rewrite，以apache为例，修改
             * 配置文件/etc/httpd/conf/httpd.conf(以你的apache安装路径为准)，在DirectoryIndex index.php这行下面增加以下两行
              RewriteEngine On
              RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]
             * */
            if (isset($_SERVER['HTTP_AUTHORIZATION'])) {
                $authorizationBase64 = $_SERVER['HTTP_AUTHORIZATION'];
            }
            if (isset($_SERVER['HTTP_X_OSS_PUB_KEY_URL'])) {
                $pubKeyUrlBase64 = $_SERVER['HTTP_X_OSS_PUB_KEY_URL'];
            }

            if ($authorizationBase64 == '' || $pubKeyUrlBase64 == '') {
                header("http/1.1 403 Forbidden");
                exit();
            }

            // 2.获取OSS的签名
            $authorization = base64_decode($authorizationBase64);

            // 3.获取公钥
            $pubKeyUrl = base64_decode($pubKeyUrlBase64);
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, $pubKeyUrl);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
            $pubKey = curl_exec($ch);
            if ($pubKey == "") {
                //header("http/1.1 403 Forbidden");
                exit();
            }

            // 4.获取回调body
            $body = file_get_contents('php://input');

            trace($body, __METHOD__);

            // 5.拼接待签名字符串
            $path = $_SERVER['REQUEST_URI'];
            $pos = strpos($path, '?');
            if ($pos === false) {
                $authStr = urldecode($path) . "
" . $body;
            } else {
                $authStr = urldecode(substr($path, 0, $pos)) . substr($path, $pos, strlen($path) - $pos) . "
" . $body;
            }

            // 6.验证签名
            $ok = openssl_verify($authStr, $authorization, $pubKey, OPENSSL_ALGO_MD5);
            if (empty($ok)) {
                throw new Exception('验证签名失败');
            }
　　　　　　　
　　　　　　　// 7.处理相关业务



$is_success = true;
        } catch (Exception $e) {
            $body = file_get_contents('php://input');
            $res = 'oss callback error' . $e->getMessage() . $e->getLine();
            Log::record($res . ",data:" . json_encode($body), 'warning');
        }

        if ($is_success) {
            return $this->jsonSuccess($res);
        } else {
            return $this->jsonError($res);
        }
    }

  sts策略

private function _getPolicy(){
    //你的sts策略
}

可能有有些还不够完善，有啥问题再继续更新修改吧！！！！！！