七牛雲 + 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 的我就不寫了