Apex直传阿里云OSS

0.从阿里云下载demo

1.前端部分

加载需要的JS包
从阿里的demo中找到这个两个JS包上传到Apex的静态文件中

将下方的JS放置在上图的框框中

需要注意apex.server.process("TO_ME_OSS" 这里

accessid = ''
accesskey = ''
host = ''
policyBase64 = ''
signature = ''
// callbackbody = ''
filename = ''
key = ''
expire = 0
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000;
is_using_oss = false
new_multipart_params = ''
hash_filename = ''




function random_string(len) {
    len = len || 32;
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = chars.length;
    var pwd = '';
    for (i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

function get_suffix(filename) {
    pos = filename.lastIndexOf('.')
    suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}


function get_signature() {
    // 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。
    now = timestamp = Date.parse(new Date()) / 1000;
    if (expire < now + 3) {
        apex.server.process("TO_ME_OSS", {}, {
            async: false,
            success: function (data) {
                host = data.host
                policyBase64 = data.policy
                accessid = data.accessid
                signature = data.signature
                expire = parseInt(data.expire)
                //   callbackbody = data.callback
                key = data.dir
            }
        });
        return true;
    }
    return false;
};




function set_upload_param(up, filename, ret) {
    if (ret == false) {
        ret = get_signature()
    }
    g_object_name = key;
    if (filename != '') {
        // todo 后台可以check下图片是否已经上传过了 存表 依据原有文件名 
        suffix = get_suffix(filename) // 获取后缀
        var random_file_name = random_string(20);
        g_object_name = key + random_file_name + suffix;
        hash_filename = random_file_name + suffix;
    }
    new_multipart_params = {
        'key': g_object_name,
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status': '200', //让服务端返回200,不然，默认会返回204
        // 'callback': callbackbody,
        'signature': signature,
    };

    up.setOption({
        'url': host,
        'multipart_params': new_multipart_params
    });

    up.start();

}
var uploader = new plupload.Uploader({
    runtimes: 'html5,html4',
    //    runtimes: 'html5,flash,silverlight,html4',
    browse_button: 'selectfiles',
    multi_selection: false, //是否允许多选
    container: document.getElementById('container'),
    //  flash_swf_url: '#APP_IMAGES#Moxie.swf',
    // silverlight_xap_url: '#APP_IMAGES#Moxie.xap',
    url: 'http://oss.aliyuncs.com',
    filters: {
        mime_types: [ //只允许上传图片和zip文件
            { title: "Image files", extensions: "jpg,gif,png,bmp" },
            //  { title: "Zip files", extensions: "zip,rar" }
        ],
        max_file_size: '10mb', //最大只能上传10mb的文件
        prevent_duplicates: true //不允许选取重复文件
    },
    init: {
        //  https://blog.csdn.net/sunwork888/article/details/100976725
        PostInit: function () {
            //   document.getElementById('ossfile').innerHTML = '';
            document.getElementById('postfiles').onclick = function () {
                // todo 检查下客户端OSS是否用
                set_upload_param(uploader, '', false);
                return false;
            };
        },

        FilesAdded: function (up, files) {
            console.log('------');
            console.log(files);
            plupload.each(files, function (file) {
                document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
                    + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
                    + '</div>';
            });
        },

        BeforeUpload: function (up, file) {
            //  check_object_radio(); // 重命名

            set_upload_param(up, file.name, true);
        },

        UploadProgress: function (up, file) {
            var d = document.getElementById(file.id);
            d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>" + "<span>" + host + "/" + g_object_name + "</span>";
            var prog = d.getElementsByTagName('div')[0];
            var progBar = prog.getElementsByTagName('div')[0]
            progBar.style.width = 2 * file.percent + 'px';
            progBar.setAttribute('aria-valuenow', file.percent);
        },

        FileUploaded: function (up, file, info) {
            if (info.status == 200) {
                apex.server.process("SAVE_FILE_NAME", {
                    x01: file.name,
                    x02: g_object_name,
                    x03: host
                });


                apex.message.showPageSuccess("Upload to OSS success!");
            } else if (info.status == 203) {
                console.log(info.response);
            }
        },

        Error: function (up, err) {
            apex.message.clearErrors();
            if (err.code == -600) {
                apex.message.showErrors([
                    {
                        type: "error",
                        location: "page",
                        message: "选择的文件太大了!",
                        unsafe: false
                    }
                ]);
            } else if (err.code == -601) {
                apex.message.showErrors([
                    {
                        type: "error",
                        location: "page",
                        message: "请选择图片!",
                        unsafe: false
                    }
                ]);
            } else if (err.code == -602) {
                apex.message.showErrors([
                    {
                        type: "error",
                        location: "page",
                        message: "这个文件已经上传过一遍了!",
                        unsafe: false
                    }
                ]);
            } else {
                apex.message.showErrors([
                    {
                        type: "error",
                        location: "page",
                        message: "抱歉上传失败" + err.response,//有可能 客户端 网络无法访问oss
                        unsafe: false
                    }
                ]);
            }
        }
    }
});
uploader.init();

创建一些区域和按钮

PS:
此处可定制一些操作,比如记录下上传的记录

2.后端部分

后端ajax 生成签名

在全局的处理里新建一个ajax回调用于生成签名

code如下是仿写阿里云demo的python部分.大家可自行下载其他demo 验证.

declare
-- # 请填写您的AccessKeyId。
    l_access_key_id     varchar2(50)   := :ME_ACCESS_KEY_ID;
-- # 请填写您的AccessKeySecret。
    l_access_key_secret varchar2(50)   := :ME_ACCESS_KEY_SECRET;
-- # host的格式为 bucketname.endpoint ，请替换为您的真实信息。
--  l_host              varchar2(1000) := 'https://panosstest1111.oss-cn-beijing.aliyuncs.com';
        l_host              varchar2(1000) := :ME_HOST;

-- # callback_url为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
    l_callback_url      varchar2(1000) := 'http://88.88.88.88:8888';
-- # 用户上传文件时指定的前缀。
--    l_upload_dir        varchar2(1000) := 'aaaaaa/';
        l_upload_dir        varchar2(1000) := :ME_DIR;
    expiration          varchar2(50);
    expire              varchar2(50);
    policy_encode       RAW(2000);
    l_mac_secret        RAW(2000);
    l_clob              clob;
    policy_vc           varchar2(2000);
    sign_result_vc      varchar2(1000);
    l_callback_body_vc  varchar2(4000);
begin
    -- https://stackoverflow.com/questions/1749753/making-a-sha1-hash-of-a-row-in-oracle
-- https://docs.oracle.com/cd/B19306_01/appdev.102/b14258/d_crypto.htm#i1000594
--     赋权
-- GRANT EXECUTE ON SYS.DBMS_CRYPTO TO apex_dev;
    begin
        select trunc(extract(day from intvl) * 24 * 60 * 60
            + extract(hour from intvl) * 60 * 60
            + extract(minute from intvl) * 60
            + extract(second from intvl)
                )
        into expire
        from (select (CURRENT_TIMESTAMP + interval '30' second) - TO_TIMESTAMP('1970-01-01', 'YYYY-MM-DD') intvl from dual);
        expiration := to_char(CURRENT_TIMESTAMP + interval '30' second, 'yyyy-mm-dd"T"HH24:MI:SS"Z"');
        apex_json.initialize_clob_output;
        apex_json.open_object;
        apex_json.write('expiration', expiration);
        apex_json.open_array('conditions');
        apex_json.open_array;
        apex_json.write('starts-with');
        apex_json.write('$key');
        apex_json.write(l_upload_dir);
        
        apex_json.close_array;
        apex_json.close_array;
        apex_json.close_object;
        l_clob := apex_json.get_clob_output;
        apex_debug.warn('----------starts-with----------');
        apex_debug.warn(l_clob);
        apex_json.free_output;
        policy_encode := utl_encode.base64_encode(UTL_I18N.STRING_TO_RAW(l_clob, 'AL32UTF8'));
        policy_vc := UTL_I18N.RAW_TO_CHAR(policy_encode, 'AL32UTF8');

        l_mac_secret := sys.dbms_crypto.mac(
                src => policy_encode,
                key => UTL_I18N.STRING_TO_RAW(l_access_key_secret, 'AL32UTF8'),
                typ => sys.dbms_crypto.HMAC_SH1
            );
        sign_result_vc := UTL_I18N.RAW_TO_CHAR(utl_encode.base64_encode(l_mac_secret), 'AL32UTF8');
--     todo callback body
        apex_json.initialize_clob_output;
        apex_json.open_object;
        apex_json.write('callbackUrl', l_callback_url);
        apex_json.write('callbackBody', 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}');
        apex_json.write('callbackBodyType', 'application/x-www-form-urlencoded');
        apex_json.close_object;
        l_clob := apex_json.get_clob_output;
        apex_json.free_output;
        l_callback_body_vc := UTL_I18N.RAW_TO_CHAR(utl_encode.base64_encode(UTL_I18N.STRING_TO_RAW(l_clob, 'AL32UTF8')), 'AL32UTF8');
    end;
--     todo token body
--apex_json.initialize_clob_output;
    apex_json.open_object;
    apex_json.write('accessid', l_access_key_id);
    apex_json.write('host', l_host);
    apex_json.write('policy', policy_vc);
    apex_json.write('signature', sign_result_vc);
    apex_json.write('expire', expire); -- todo 时间戳
    apex_json.write('dir', l_upload_dir);
-- apex_json.write('callback', l_callback_body_vc);
    apex_json.close_object;
    apex_debug.warn( apex_json.get_clob_output);
    sys.htp.p(apex_json.get_clob_output);
-- l_clob := apex_json.get_clob_output;
--    apex_json.free_output;
--     sys.DBMS_OUTPUT.PUT_LINE(l_clob);
end;

成品

选择文件(禁用了多选,重命名文件名)

上传完成

我的元宇宙

Apex直传阿里云OSS

Apex直传阿里云OSS

0.从阿里云下载demo

1.前端部分

2.后端部分

Pan