第一步：
写好获取直传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已经可以了
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/219.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
