美文网首页七牛云存储PHP经验分享
使用七牛JSSDK文件上传记录

使用七牛JSSDK文件上传记录

作者: 猪大圣三七 | 来源:发表于2020-01-11 18:08 被阅读0次

    思考:

    原先只使用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时,斟酌一下。

    相关文章

      网友评论

        本文标题:使用七牛JSSDK文件上传记录

        本文链接:https://www.haomeiwen.com/subject/pvkbactx.html