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

技术文档 - 前端相关

2019-11-24

 暂无演示  

第一步:

    写好获取直传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已经可以了