laravel-admin引用wangEditor編輯器 使用二：上傳視頻/音頻（1）

1.在wangEditor.js 中添加視頻上傳相關處理

添加的代碼：

   /*
 上傳視頻
 */

// 構造函數
    function UploadVideo(editor) {
        this.editor = editor;
    }

// 原型
    UploadVideo.prototype = {
        constructor: UploadVideo,
        // 根據 debug 彈出不同的信息
        _alert: function _alert(alertInfo, debugInfo) {
            var editor = this.editor;
            var debug = editor.config.debug;
            // var debug = true;
            var customAlert = editor.config.customAlert;

            if (debug) {
                throw new Error('wangEditor: ' + (debugInfo || alertInfo));
            } else {
                if (customAlert && typeof customAlert === 'function') {
                    customAlert(alertInfo);
                } else {
                    alert(alertInfo);
                }
            }
        },
        //插入視頻的方法  需要單獨定義
        insertLinkVideo:function(link){
            var _this3 = this;

            if (!link) {
                return;
            }
            var editor = this.editor;
            var config = editor.config;

            // 校驗格式
            var linkVideoCheck = config.linkVideoCheck;
            var checkResult = void 0;
            if (linkVideoCheck && linkVideoCheck === 'function') {
                checkResult = linkVideoCheck(link);
                if (typeof checkResult === 'string') {
                    // 校驗失敗，提示信息
                    alert(checkResult);
                    return;
                }
            }
            editor.cmd.do('insertHTML', '<video src="' + link + '"  controls/>');

            // 驗證視頻 url 是否有效，無效的話給出提示
            var video = document.createElement('video');
            video.onload = function () {
                var callback = config.linkVideoCallback;
                if (callback && typeof callback === 'function') {
                    callback(link);
                }

                video = null;
            };
            video.onerror = function () {
                video = null;
                // 無法成功下載圖片
                _this2._alert('插入視頻錯誤', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25');
                return;
            };
            video.onabort = function () {
                video = null;
            };
            video.src = link;
        },
        // 上傳視頻
        uploadVideo: function uploadVideo(files) {
            var _this3 = this;

            if (!files || !files.length) {
                return;
            }

            // ------------------------------ 獲取配置信息 ------------------------------
            var editor = this.editor;
            var config = editor.config;
            var uploadVideoServer = "/uploadVideo";//上傳地址  這裏要和自己路由配置的一致 不然找不到方法

            var maxSize = 100 * 1024 * 1024;       //100M
            var maxSizeM = maxSize / 1000 / 1000;
            var maxLength = 1;
            var uploadFileName = "myvideo";//接收的名字
            var uploadVideoParams = config.uploadVideoParams || {};
            var uploadVideoHeaders = {};
            var hooks =config.uploadImgHooks || {};
            var timeout = 5 * 60 * 1000;        //5 min
            var withCredentials = config.withCredentials;
            if (withCredentials == null) {
                withCredentials = false;
            }

            // ------------------------------ 驗證文件信息 ------------------------------
            var resultFiles = [];
            var errInfo = [];
            arrForEach(files, function (file) {
                var name = file.name;
                var size = file.size;

                // chrome 低版本 name === undefined
                if (!name || !size) {
                    return;
                }

                if (/\.(mp4)$/i.test(name) === false && /\.(mp3)$/i.test(name) === false) {
                    // 後綴名不合法，不是視頻
                    errInfo.push('\u3010' + name + '\u3011\u4e0d\u662f\u89c6\u9891');
                    return;
                }
                if (maxSize < size) {
                    // 上傳視頻過大
                    errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');
                    return;
                }

                // 驗證通過的加入結果列表
                resultFiles.push(file);
            });
            // 拋出驗證信息
            if (errInfo.length) {
                this._alert('視頻/音頻 驗證未通過: \n' + errInfo.join('\n'));
                return;
            }
            if (resultFiles.length > maxLength) {
                this._alert('一次最多上傳' + maxLength + '個視頻');
                return;
            }

            // ------------------------------ 自定義上傳 ------------------------------
            // 添加視頻數據
            var formdata = new FormData();
            arrForEach(resultFiles, function (file) {
                var name = uploadFileName || file.name;
                formdata.append(name, file);
            });

            // ------------------------------ 上傳視頻 ------------------------------
            if (uploadVideoServer && typeof uploadVideoServer === 'string') {
                // 添加參數
                var uploadVideoServer = uploadVideoServer.split('#');
                uploadVideoServer = uploadVideoServer[0];
                var uploadVideoServerHash = uploadVideoServer[1] || '';
                objForEach(uploadVideoParams, function (key, val) {
                    val = encodeURIComponent(val);

                    // 第一，將參數拼接到 url 中
                    if (uploadVideoParamsWithUrl) {
                        if (uploadVideoServer.indexOf('?') > 0) {
                            uploadVideoServer += '&';
                        } else {
                            uploadVideoServer += '?';
                        }
                        uploadVideoServer = uploadVideoServer + key + '=' + val;
                    }

                    // 第二，將參數添加到 formdata 中
                    formdata.append(key, val);
                });
                if (uploadVideoServerHash) {
                    uploadVideoServer += '#' + uploadVideoServerHash;
                }

                // 定義 xhr
                var xhr = new XMLHttpRequest();
                xhr.open('POST', uploadVideoServer);

                // 設置超時
                xhr.timeout = timeout;
                xhr.ontimeout = function () {
                    // hook - timeout
                    if (hooks.timeout && typeof hooks.timeout === 'function') {
                        hooks.timeout(xhr, editor);
                    }

                    _this3._alert('上傳視頻/音頻 超時');
                };

                // 監控 progress
                if (xhr.upload) {
                    xhr.upload.onprogress = function (e) {
                        var percent = void 0;
                        // 進度條
                        var progressBar = new Progress(editor);
                        if (e.lengthComputable) {
                            percent = e.loaded / e.total;
                            progressBar.show(percent);
                        }
                    };
                }

                // 返回數據
                xhr.onreadystatechange = function () {
                    var result = void 0;
                    if (xhr.readyState === 4) {
                        if (xhr.status < 200 || xhr.status >= 300) {
                            // hook - error
                            if (hooks.error && typeof hooks.error === 'function') {
                                hooks.error(xhr, editor);
                            }

                            // xhr 返回狀態錯誤
                            _this3._alert('上傳視頻/音頻發生錯誤', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
                            return;
                        }

                        result = xhr.responseText;
                        if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
                            try {
                                console.log(result);
                                result = JSON.parse(result);
                            } catch (ex) {
                                // hook - fail
                                if (hooks.fail && typeof hooks.fail === 'function') {
                                    hooks.fail(xhr, editor, result);
                                }
                                _this3._alert('上傳視頻/音頻失敗', '上傳視頻/音頻返回結果錯誤，返回結果是: ' + result);
                                return;
                            }
                        }
                        if (!hooks.customInsert && result.errno == '0') {
                            // hook - fail
                            if (hooks.fail && typeof hooks.fail === 'function') {
                                hooks.fail(xhr, editor, result);
                            }

                            // 數據錯誤
                            _this3._alert('上傳視頻/音頻失敗', '上傳視頻/音頻返回結果錯誤，返回結果 errno=' + result.errno);
                        } else {
                            if (hooks.customInsert && typeof hooks.customInsert === 'function') {
                                hooks.customInsert(_this3.insertLinkVideo.bind(_this3), result, editor);
                            } else {
                                // 將視頻插入編輯器
                                var data = result || [];
                                // data.forEach(function (link) {
                                //     console.log(link);
                                //
                                // });
                                _this3.insertLinkVideo(data.url);
                            }

                            // hook - success
                            if (hooks.success && typeof hooks.success === 'function') {
                                hooks.success(xhr, editor, result);
                            }
                        }
                    }
                };

                // hook - before
                if (hooks.before && typeof hooks.before === 'function') {
                    var beforeResult = hooks.before(xhr, editor, resultFiles);
                    if (beforeResult && (typeof beforeResult === 'undefined' ? 'undefined' : _typeof(beforeResult)) === 'object') {
                        if (beforeResult.prevent) {
                            // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
                            this._alert(beforeResult.msg);
                            return;
                        }
                    }
                }

                // 自定義 headers
                objForEach(uploadVideoHeaders, function (key, val) {
                    xhr.setRequestHeader(key, val);
                });

                // 跨域傳 cookie
                xhr.withCredentials = withCredentials;

                // 發送請求
                xhr.send(formdata);

                // 注意，要 return 。不去操作接下來的 base64 顯示方式
                return;
            }
        }
    };

完整的wangEditor.js見下一篇