前端七牛云分片上传

html代码

<input id="c-urlfile2" required="required" class="form-control" size="50" name="row[urlfile]" type="text"  value="{$row.urlfile|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <div id="box">
                        <input type="file" id="select"  class="btn "  />
                    </div>
                    <div style='overflow:hidden'>
                        <div id='totalBar' style='width:60%;'>
                            <p class='speed'></p>
                        </div>
                    </div>
                </div>

js代码

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script>
    var token = "你的七牛云token";
    console.log(qiniu)
    // z1华北 z2 华南
    let config = {
        useCdnDomain: true,
        region: qiniu.region.z2
    };
    let putExtra = {
        fname: "",
        params: {},
        mimeType: null
    };

    function randomString(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
            a = t.length,
            n = "";
        for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }
    $("#select").change(function(){
        let file = this.files[0];
        let key = file.name;
        var point = key.lastIndexOf(".");
        var type = key.substr(point);
        var filename = randomString(16)+type;
        console.log(point);
        let subscription;
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, filename, token, putExtra, config);
        let observer ={
            next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                let total = result.total;
                $(".speed").text("进度：" + total.percent + "% ");//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
            },
            error(err){                          //失败后
                alert(err.message);
            },
            complete(res){
                $("#c-urlfile2").val(res.key);
                console.log(res)                   //成功后
                // ?imageView2/2/h/100：展示缩略图，不加显示原图
                // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高
            }
        }
        // 取消上传
        // subscription.unsubscribe();
        observable.subscribe(observer)
    })

</script>

最后上传的效果

七牛云返回的数据