使用七牛JSSDK文件上传记录

思考:

原先只使用PHPSDK上传,经过近几个月的运营反馈.发现经常出现上传不了图片,前端无法拿到图片url的情况。

思考了整个上传的流程，PHPSDK在使用过程中，先保存文件到本地而后传入云端。从并发量来说,目前的流量也够应付的来,但也不得不排除会有低概率的事故发生。

随后,我采用PHPSDK获取token,调用JSSDK直传七牛的方式进行前端上传。

话不多说 贴上代码:

说明:我使用的是layui文件上传类，包裹调用JSSDK

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

<script src='/ishuowww/Tpl//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//限制上传数量
            , 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 = {                         //设置上传过程的监听函数
                    next(result) {                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                        var num = Math.floor(result.total.percent); //查看进度[loaded:已上传大小(字节);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            //分片上传的并发请求量
                };

                var observable = qiniu.upload(file, result.imgUrl, token, putExtra, config);
                observable.subscribe(observer)          // 上传开始
            }
            , error: function () {
                //演示失败状态，并实现重传
                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回调后调用SDK接口.

重点归纳

1.拿取文件对象上传

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

2.文件类型和大小的规则设置依托layui文件上传类限定

3.文件的命名在上传过程的监听函数中设置

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

4.SDK接口使用

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

相关接口参数可参考七牛官方文档.
但是也要说明下七牛JSSDK会有一些手机浏览器不适配的问题报BUG，建议需要用到JSSDK时，斟酌一下。