第一步:
写好获取直传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修改(有2处修改,第1处修改) *********/ /***********************本段修改开始*****************************/ /* 原代码 */ // domUtils.on(input, 'change', function(){ // if(!input.value) return; /* 新代码 */ domUtils.on(input, 'change', function(e){ if(!input.value) return; var file = e.target.files[0]; var server_url = me.getOpt('server_url'); /***********************本段修改结束*****************************/ /****************************************************************/ /******** 单图片直传OSS修改(有2处修改,第2处修改) *********/ /***********************本段修改开始*****************************/ /* 原代码 */ // domUtils.on(iframe, 'load', callback); // form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params); // form.submit(); /* 新代码 */ $.get(server_url,{},function(ret){ var sign = JSON.parse(ret); var form = new FormData(); // 添加签名信息 form.append('OSSAccessKeyId', sign['accessid']); form.append('policy', sign['policy']); form.append('Signature', sign['signature']); form.append('key', sign['filename'] + fileext); form.append('success_action_status', '200'); form.append('callback', sign['callback']); // 添加文件 form.append('file', file); $.ajax({ url: sign['host'], data: form, processData: false, contentType: false, type: 'POST' }).done(function (ret) { var link = sign['host'] + "/" + sign['filename'] + fileext; loader = me.document.getElementById(loadingId); loader.setAttribute('src', link); loader.setAttribute('_src', link); loader.setAttribute('title', ''); loader.setAttribute('alt', ''); loader.removeAttribute('id'); domUtils.removeClasses(loader, 'loadingclass'); }); }); /***********************本段修改结束*****************************/
至此单张图片直传OSS已经可以了