1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

百度ueditor编辑器文件视频图片直传OSS - 03):多张图片直传OSS修改案例

小川 前端

第一步:

    写好获取直传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查找内容修改:

01.png

02.png

03.png

04.png

05.png


/****************************************************************/
/********   多文件直传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已经可以了


升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/219.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情