七牛云 + esayui组件上传视频

最近项目中需要用到 因为发现很多坑 因此发出来分享一下

流程：

1. 前台用户选择文件
2. 前台请求上传文件的token
3. 前台上传

4. 将信息提交到后台保存

   前台html文件

<input name="upload" id="file2" class="easyui-filebox" style="width:300px" required=true
		data-options="buttonText:'选择文件',buttonAlign: 'left'">
		<input type="text" name="address" id="uploadName2" hidden="true">
		<input type="button" id="uploadFile2" value="开始测试上传">
		<div id="progress" style="width:400px;"></div>
           

需要先引入 七牛的jssdk

<script type="text/javascript">
                        //import * as qiniu from "../../../js/js-sdk-master/src";
                        //import * as qiniu from "../../../js/js-sdk-master/src";
                        //import * as qiniu from 'qiniu-js'


                        $(function () {
                            //添加对话框，上传控件初始化
                            $('#file2').filebox({
                                buttonText: '选择文件',  //按钮文本
                                buttonAlign: 'right',   //按钮对齐
                                //multiple: true,       //是否多文件方式
                                //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型
                                onChange: function (e) {
                                    alert("进入上传处理")
                                    var url = "/file/QiniuUpToken"
                                    var progress = "progress"
                                    var fileBox = "uploadName2"
                                    var filefile = "file2"
                                    uploadFile(progress, filefile, this, fileBox, url)

                                }
                            });
                       /**
                         *
                         * @param progress 进度条对象
                         * @param filefile 需要上传的文件控件的Id
                         * @param file this  this就完事了no why
                         * @param uploadNameBox 上传的文件的名字的盒子控件
                         * @param uploadUrl 获取token的链接
                         */
                        function uploadFile(progress, filefile, file, uploadNameBox, getUptpkenUrl) {
                            var uploadNameBox = $("#" + uploadNameBox)
                            var progress = $("#" + progress);
                            var obj = $("#" + filefile);
                            console.log(obj)
                            var fileName = $("#" + filefile).filebox('getValue');
                            ;
                            //上传的本地文件绝对路径
                            console.log(fileName)
                            var suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length);//后缀名
                            var file = $(file).context.ownerDocument.activeElement.files[0]                     //获取上传的文件
                            progress.progressbar({//生成进度条组件
                                value: 0
                            });
                            if (file == null) {
                                $.messager.alert("错误提示", "请先选择文件再点击上传")
                                return;
                            }
                            var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
                                / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
                                / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
                            //七牛云上传
                            $.ajax({
                                type: 'post',
                                url: getUptpkenUrl,
                                data: {"suffix": suffix},
                                dataType: 'json',
                                success: function (result) {
                                    if (result.success == 1) {
                                        var observer = {                         //设置上传过程的监听函数
                                            next(result) {                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                                                var value = Math.ceil(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                                                console.log(value)
                                                if (value < 100) {
                                                    progress.progressbar('setValue', value);
                                                }
                                            },
                                            error(err) {                          //失败后
                                                alert(err.message);
                                            },
                                            complete(res) {                       //成功后
                                                // ?imageView2/2/h/100：展示缩略图，不加显示原图
                                                // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高
                                                console.log(res)
                                                progress.progressbar('setValue', 100);
                                                $.messager.alert("提示", "上传成功！！！")
                                                uploadNameBox.attr("value", result.domain + "/" + result.fileUrl + "?attname=" + result.fileUrl);
                                            }
                                        };
                                        var putExtra = {
                                            fname: "",                          //原文件名
                                            params: {},                         //用来放置自定义变量
                                            mimeType: null                      //限制上传文件类型
                                        };
                                        var config = {
                                            //region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                                            concurrentRequestLimit: 3            //分片上传的并发请求量
                                        };

                                        var observable = qiniu.upload(file, result.fileUrl, result.token, putExtra, config);
                                        var subscription = observable.subscribe(observer);          // 上传开始
                                        // 取消上传
                                        // subscription.unsubscribe();
                                    } else {
                                        $.messager.alert("提示信息", "获取上传凭证失败！")                //获取凭证失败
                                    }
                                }, error: function () {                             //服务器响应失败处理函数
                                    $.messager.alert("提示信息", "服务器繁忙，请稍后再试")
                                }
                            });
                        }   
   
           

后端获取 uptoke 的我就不写了