本文主要是介绍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; //100Mvar 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 minvar 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 === undefinedif (!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;}// 定义 xhrvar xhr = new XMLHttpRequest();xhr.open('POST', uploadVideoServer);// 设置超时xhr.timeout = timeout;xhr.ontimeout = function () {// hook - timeoutif (hooks.timeout && typeof hooks.timeout === 'function') {hooks.timeout(xhr, editor);}_this3._alert('上传视频/音频 超时');};// 监控 progressif (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 - errorif (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 - failif (hooks.fail && typeof hooks.fail === 'function') {hooks.fail(xhr, editor, result);}_this3._alert('上传视频/音频失败', '上传视频/音频返回结果错误，返回结果是: ' + result);return;}}if (!hooks.customInsert && result.errno == '0') {// hook - failif (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 - successif (hooks.success && typeof hooks.success === 'function') {hooks.success(xhr, editor, result);}}}};// hook - beforeif (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;}}}// 自定义 headersobjForEach(uploadVideoHeaders, function (key, val) {xhr.setRequestHeader(key, val);});// 跨域传 cookiexhr.withCredentials = withCredentials;// 发送请求xhr.send(formdata);// 注意，要 return 。不去操作接下来的 base64 显示方式return;}}};
完整的wangEditor.js见下一篇
这篇关于laravel-admin引用wangEditor编辑器 使用二：上传视频/音频（1）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
