Oracle Apex将表中BLOB格式JPG传递给JS加载报错问题求解

• 自定义存储过程报错：存储过程的异常分支被触发，大概率是调用时没有正确传入p_file_name参数，或是APEX会话上下文没有对应表的访问权限，查询不到数据后输出了Whoops，同时没有返回有效内容导致204状态码。
• Base64方案不生效的问题有两个：
  1. PL/SQL端没有设置正确的JSON响应头，APEX默认输出的内容格式不对，前端无法正常解析返回的base64数据
  2. JS端逻辑错误：把Image对象直接传入了期望接收url字符串的getImageData方法，同时await用在了非async的success回调中，触发语法错误导致逻辑中断

1. 修正APEX AJAX进程的PL/SQL代码 #

你用的base64方案本身是可行的，只需要补充响应头配置和异常处理即可：

declare
  l_image_clob clob;
  l_image_blob blob;
begin
  -- 先设置响应头，确保返回JSON格式，避免多余输出
  sys.htp.init;
  sys.owa_util.mime_header('application/json', FALSE);
  sys.htp.p('Cache-Control: no-cache');
  sys.owa_util.http_header_close;

  select BLOB_CONTENT
  into l_image_blob
  from UPLOADED_IMAGES
  where FILENAME = :P1_IMAGES;

  l_image_clob := apex_web_service.blob2clobbase64(
                    p_blob => l_image_blob
                  );
 
  apex_json.open_object;
  apex_json.write('imageBase64', l_image_clob );
  apex_json.close_object;
exception
  when no_data_found then
    apex_json.open_object;
    apex_json.write('error', '未找到对应图片');
    apex_json.close_object;
  when others then
    apex_json.open_object;
    apex_json.write('error', sqlerrm);
    apex_json.close_object;
end;

2. 修正前端JS代码 #

不需要提前创建Image对象，直接把拼接好的base64 data url传给ImageLoader即可，同时给success回调加上async修饰符支持await语法：

const imageSize = 224;
// 调用APEX进程
apex.server.process(
    "get_file",
    {},
    {
        success: async function(data) {
            if (data.error) {
                console.error('加载图片失败:', data.error);
                return;
            }
            // 拼接base64格式的图片url
            const imageUrl = 'data:image/jpeg;base64,' + data.imageBase64;
            const imageLoader = new ImageLoader(imageSize, imageSize);
            try {
                const imageData = await imageLoader.getImageData(imageUrl);
                // 此处编写拿到imageData后的业务逻辑
                console.log('图片数据加载成功', imageData);
            } catch (e) {
                console.error('处理图片失败:', e);
            }
        },
        error: function(xhr, status, error) {
            console.error('接口请求失败:', status, error);
        }
    }
);

如果修改后仍然报错，可按以下顺序排查：

• 调用apex.server.process时添加pageItems参数，确保P1_IMAGES页面项的值同步到APEX会话：

apex.server.process(
    "get_file",
    {pageItems: "#P1_IMAGES"}, // 新增此行
    // 其余配置保持不变
)

• 确认APEX应用的解析schema拥有UPLOADED_IMAGES表的SELECT权限
• 可以把接口返回的imageBase64内容复制出来，拼上data:image/jpeg;base64,前缀后贴到浏览器地址栏，确认base64内容本身可以正常显示图片

内容的提问来源于stack exchange，提问作者Anjoys