第一步:
写好获取直传oss所需要参数的接口,不懂的可以去看oss官网上的文档web直接oss
第二步:
前段页面引入插件、启动插件,并传入获取oss直传所需参数的接口地址
如:
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="JavaScript" src="/static/js/jquery.js"></script> </head> <body> <div class="demo"> <script id="container" name="describe" type="text/plain"></script> </div> </body> <script language="JavaScript" src="/static/js/ueditor/ueditor.config.js"></script> <script language="JavaScript" src="/static/js/ueditor/ueditor.all.js"></script> <script language="JavaScript"> var server_url = "{:url('alioss/get',['type'=>4])}"; var editor = UE.getEditor('container',{server_url:server_url}); </script> </html>
第三步:
修改相关js代码段实现多张图片直传OSS,找到ueditor\dialogs\image\image.js查找内容修改:
/****************************************************************/ /******** 多文件直传OSS修改(共有5处修改,第1处修改) *******/ /***********************本段修改开始*****************************/ /* 新代码 */ OssSign = null, /***********************本段修改结束*****************************/ /****************************************************************/ /******** 多文件直传OSS修改(共有5处修改,第2处修改) *******/ /***********************本段修改开始*****************************/ /* 原代码 */ // server: actionUrl, // fileVal: editor.getOpt('imageFieldName'), /* 新代码 */ fileVal: 'file', /***********************本段修改结束*****************************/ /****************************************************************/ /******** 多文件直传OSS修改(共有5处修改,第3处修改) *******/ /***********************本段修改开始*****************************/ /* 原代码 */ // uploader.on('all', function (type, files) { // switch (type) { // case 'uploadFinished': // setState('confirm', files); // break; // case 'startUpload': // /* 添加额外的GET参数 */ // var params = utils.serializeParam(editor. // queryCommandValue('serverparam')) || '', // url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == // -1 ? '?':'&') + 'encode=utf-8&' + params); // uploader.option('server', url); // setState('uploading', files); // break; // case 'stopUpload': // setState('paused', files); // break; // } // }); /* 新代码 */ uploader.on('all', function (type, files) { switch (type) { case 'uploadFinished': setState('confirm', files); break; case 'startUpload': uploader.option('server', OssSign['host']); setState('uploading', files); break; case 'stopUpload': setState('paused', files); break; } }); /***********************本段修改结束*****************************/ /****************************************************************/ /******** 多文件直传OSS修改(共有5处修改,第4处修改) *******/ /***********************本段修改开始*****************************/ /* 原代码 */ // uploader.on('uploadBeforeSend', function (file, data, header) { // //这里可以通过data对象添加POST参数 // header['X_Requested_With'] = 'XMLHttpRequest'; // }); /* 新代码 */ uploader.on('uploadBeforeSend', function (file, data, header) { // 获取新的文件名(这里只是为了每上传一个文件的名称都不一样) $.get(editor.getOpt('server_url'), {}, function (sign) { OssSign = JSON.parse(sign); }); // 休眠0.1秒(休眠是为了让上面的先获取成功文件名) var now = new Date(); var exitTime = now.getTime() + 100; while (true) { now = new Date(); if (now.getTime() > exitTime){ break; } } // 获取文件后缀 var fileext = data.name ? data.name.substr(data.name.lastIndexOf('.')):'.jpeg'; data = $.extend(data, { 'OSSAccessKeyId': OssSign['accessid'], 'policy': OssSign['policy'], 'Signature': OssSign['signature'], 'key': OssSign['filename'] + fileext, 'success_action_status': '200', 'callback': OssSign['callback'] }); file.path = OssSign['filename'] + fileext; }); /***********************本段修改结束*****************************/ /****************************************************************/ /******** 多文件直传OSS修改(共有5处修改,第5处修改) *******/ /***********************本段修改开始*****************************/ /* 原代码 */ // $upload.on('click', function () { // if ($(this).hasClass('disabled')) { // return false; // } // if (state === 'ready') { // uploader.upload(); // } else if (state === 'paused') { // uploader.upload(); // } else if (state === 'uploading') { // uploader.stop(); // } // }); /* 新代码 */ start = function () { if (state === 'ready') { uploader.upload(); } else if (state === 'paused') { uploader.upload(); } else if (state === 'uploading') { uploader.stop(); } }; $upload.on('click', function () { if ($(this).hasClass('disabled')) { return false; } if (!OssSign) { $.get(editor.getOpt('server_url'), {}, function (sign) { OssSign = JSON.parse(sign); uploader['options']['server'] = OssSign['host']; start(); }); } else { start(); } }); /***********************本段修改结束*****************************/
至此多张图片直传OSS已经可以了