第一步:
写好获取直传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\ueditor.all.js查找内容修改:
/****************************************************************/ /********** 拖拽图片直传OSS修改(只有这一处修改) ***********/ /***********************本段修改开始*****************************/ /* 原代码 */ /* 创建Ajax并提交 */ // var xhr = new XMLHttpRequest(), // fd = new FormData(), // params = utils.serializeParam(me.queryCommandValue('serverparam')) || '', // url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params); // fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length))); // fd.append('type', 'ajax'); // xhr.open("post", url, true); // xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); // xhr.addEventListener('load', function (e) { // try{ // var json = (new Function("return " + utils.trim(e.target.response)))(); // if (json.state == 'SUCCESS' && json.url) { // successHandler(json); // } else { // errorHandler(json.state); // } // }catch(er){ // errorHandler(me.getLang('autoupload.loadError')); // } // }); // xhr.send(fd); /* 新代码 */ var server_url = me.getOpt('server_url'); var xhr = new XMLHttpRequest(), xhrSign = new XMLHttpRequest(), fd = new FormData(); xhrSign.open("post",server_url,true); xhrSign.addEventListener('load', function (e) { try{ var sign = JSON.parse(e.target.response); var filename = sign['filename'] + fileext; fd.append('OSSAccessKeyId', sign['accessid']); fd.append('policy', sign['policy']); fd.append('Signature', sign['signature']); fd.append('key', filename); fd.append('success_action_status', '200'); fd.append('callback', sign['callback']); // 添加文件 fd.append('file', file); xhr.open("post", sign['host'], true); xhr.addEventListener('load', function (e) { var url = sign['host'] + "/" + filename; successHandler({ "state": "SUCCESS", "url": url, "title": file.name, "original": file.name, "type": fileext, "size": file['size'] }); }); xhr.send(fd); }catch(er){ errorHandler(me.getLang('autoupload.loadError')); } }); xhrSign.send(); /***********************本段修改开始*****************************/
至此拖拽图片直传OSS已经可以了