思考:

原先只使用PHPSDK上傳,經(jīng)過近幾個月的運營反饋.發(fā)現(xiàn)經(jīng)常出現(xiàn)上傳不了圖片,前端無法拿到圖片url的情況。

思考了整個上傳的流程，PHPSDK在使用過程中，先保存文件到本地而后傳入云端。從并發(fā)量來說,目前的流量也夠應付的來,但也不得不排除會有低概率的事故發(fā)生。

隨后,我采用PHPSDK獲取token,調(diào)用JSSDK直傳七牛的方式進行前端上傳。

話不多說 貼上代碼:

說明:我使用的是layui文件上傳類，包裹調(diào)用JSSDK

1.引用SDK文件qiniu.min.js

<script src='__TMPL__/public/jssdk/js/qiniu.min.js'></script>

2.前端上傳按鈕(配合上傳進度條)

<div>
    <button type="button" class="layui-btn layui-btn-normal test" id="uploads">
    <i class="layui-icon">&#xe67c;</i>上傳評論截圖</button>
    //進度條
    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="margin:auto">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
</div>

3.JS代碼

var index = 0;
    var files = '';
    
    layui.use(['upload', 'element'], function () {
        var element = layui.element;
        var upload = layui.upload;
        var html = "";
        var uploadInst = upload.render({
            elem: '.test'
            , url: '接口地址'
            , multiple: false
            , accept: 'images'
            // , number: 3//限制上傳數(shù)量
            , size: '5120'//限制5M大小
            , before: function (obj) {
                layer.msg('圖片上傳中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
                obj.preview(function (index, file, result) {
                    // console.log(file); //得到文件對象
                    files = file
                });
            }
            , done: function (res, index) {
                // console.log(res);

                layer.close(layer.msg());//關閉上傳提示窗口

                //如果上傳失敗
                if (res.code == 0) {
                    return layer.msg('請求失敗');
                }
                var token = res.data.uptoken;
                var domain = res.data.domain;
                var file = files;

                var result = {
                    loaded: '',
                    total: '',
                    percent: '',
                    imgUrl: 'cashApply/' + (new Date()).valueOf()
                };

                var count = $('#demo2').find('img').length;
                console.log(count);
                if (count > 0) {
                    return layer.msg('只能上傳一張圖片');
                }
                index++;
                var observer = {                         //設置上傳過程的監(jiān)聽函數(shù)
                    next(result) {                        //上傳中(result參數(shù)帶有total字段的 object，包含loaded、total、percent三個屬性)
                        var num = Math.floor(result.total.percent); //查看進度[loaded:已上傳大小(字節(jié));total:本次上傳總大小;percent:當前上傳進度(0-100)]
                        var percent = num + '%'
                        element.progress('demo', percent); //配合 layui 進度條元素使用

                        $('#uploads').attr('class', 'layui-btn layui-btn-disabled');
                        $('.layui-upload-file').attr('disabled', true);
                    },
                    error(err) {                          //失敗后
                        layer.msg(err.message, {
                            time: 3000 //3秒關閉
                        }, function () {
                            $('#uploads').attr('class', 'layui-btn layui-btn-normal test');
                            $('.layui-upload-file').removeAttr('disabled');
                        });
                    },
                    complete(res1) {                      //成功后
                        //****:填寫你的綁定域名或七牛云提供的測試域名
                        //?imageView2/2/h/100：展示縮略圖，不加顯示原圖
                        layer.msg('圖片上傳成功', {
                            time: 1000 //3秒關閉
                        }, function () {
                            var url = domain + '/' + result.imgUrl
                            $("#demo2").attr("src", url);
                            $('#demo2').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle" index=' + index + '><span class="glyphicon glyphicon-trash">刪除</span></div>' +
                                '<img src="' + url + '" width="180px" height="180px">' +
                                '</div>'
                            );
                            $("#demo3").append('<input type="hidden"  index=' + index + ' xf-verify="required" name="image[]" value="' + url + '">');
                        });
                    }
                };
                var putExtra = {
                    fname: "",                          //原文件名
                    params: {},                          //用來放置自定義變量
                    mimeType: ["image/png", "image/jpeg"]  //限制上傳文件類型
                };
                var config = {
                    concurrentRequestLimit: 3            //分片上傳的并發(fā)請求量
                };

                var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
                observable.subscribe(observer)          // 上傳開始
            }
            , error: function () {
                //演示失敗狀態(tài)，并實現(xiàn)重傳
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

    });

具體思路:

用layui文件上傳類訪問后臺接口拿取token,在suceess回調(diào)后調(diào)用SDK接口.

重點歸納

1.拿取文件對象上傳

, before: function (obj) {
                obj.preview(function (index, file, result) {
                    // console.log(file); //得到文件對象
                    files = file
                });
            }

2.文件類型和大小的規(guī)則設置依托l(wèi)ayui文件上傳類限定

3.文件的命名在上傳過程的監(jiān)聽函數(shù)中設置

imgUrl: 'cashApply/' + (new Date()).valueOf()

4.SDK接口使用

var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
observable.subscribe(observer)          // 上傳開始

相關接口參數(shù)可參考七牛官方文檔.
但是也要說明下七牛JSSDK會有一些手機瀏覽器不適配的問題報BUG，建議需要用到JSSDK時，斟酌一下。