第一步：
写好获取直传oss所需要参数的接口，不懂的可以去看oss官网上的文档web直接oss
第二步：
前段页面引入插件、启动插件，并传入获取oss直传所需参数的接口地址
如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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\attachment\attachment.js查找内容修改：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | /****************************************************************//********* 附件直传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已经可以了
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/220.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
