Appearance

OMS 图片上传指南 ​

你是 OMS 系统图片上传功能专家，熟悉图片上传组件、图片服务接口和图片放大镜功能的使用。

核心组件 ​

input_image_magnifier 组件 ​

基本使用 ​

html
<!-- 最简单的用法 -->
<{input type="image_magnifier" name="image_field"}>

<!-- 完整参数示例 -->
<{input type="image_magnifier" 
        name="material_image" 
        target_type="material" 
        target_id="<{$material_info.bm_id}>" 
        display_width="150" 
        display_height="150" 
        magnifier="true"}>

参数说明 ​

参数类型必需说明
namestring✅表单字段名称
image_srcstring❌图片源URL（最高优先级）
valuestring❌图片ID（第二优先级）
target_typestring❌目标对象类型（第三优先级）
target_idstring❌目标对象ID（第三优先级）
display_widthint❌显示宽度（默认50）
display_heightint❌显示高度（默认50）
magnifierbool❌是否启用放大镜（默认true）

图片获取优先级 ​

  1. 第一优先级：image_src - 直接使用传入的图片URL
  2. 第二优先级：value（image_id） - 通过 image.php 的 dump 方法获取
  3. 第三优先级：target_type + target_id - 通过 getAttachedImages 方法获取

图片服务接口 ​

核心方法 ​

1. uploadAndAttach() - 一站式上传 ​

php
$imageModel = app::get('image')->model('image');

$result = $imageModel->uploadAndAttach(
    $file,           // 图片文件路径
    $target_type,    // 目标类型
    $target_id,      // 目标对象ID
    $name,           // 图片名称（可选）
    $sizes,          // 生成的尺寸数组（可选）
    $watermark       // 是否添加水印（可选）
);

// 返回：成功返回图片信息数组，失败返回 array('error' => '错误信息')

2. getAttachedImages() - 获取关联图片 ​

php
$images = $imageModel->getAttachedImages(
    'material',      // 目标类型
    $material_id,    // 目标ID
    'S'              // 图片尺寸（可选：L/M/S）
);

3. detach() - 删除关联 ​

php
$success = $imageModel->detach(
    $image_id,       // 图片ID
    'material',      // 目标类型
    $target_id,      // 目标ID
    true             // 是否同时删除文件
);

控制器中的图片处理 ​

php
// 在控制器中处理图片上传
if (isset($_FILES['material_image']) && !empty($_FILES['material_image']['name'])) {
    $imageModel = app::get('image')->model('image');
    
    $result = $imageModel->uploadAndAttach(
        $_FILES['material_image']['tmp_name'],
        'material',
        $material_id,
        $_FILES['material_image']['name']
    );
    
    if (isset($result['error'])) {
        $this->end(false, '图片上传失败：' . $result['error']);
    }
}

图片放大镜功能 ​

基本使用 ​

图片放大镜功能已全局加载，无需额外引入。

HTML设置 ​

html
<!-- 使用ref属性指定放大镜图片源（推荐） -->
<img src="thumb.jpg" ref="full-size.jpg" class="img-magnifier" />

<!-- 或者使用rel属性 -->
<img src="thumb.jpg" rel="full-size.jpg" class="img-magnifier" />

<!-- 使用data-src属性 -->
<img src="thumb.jpg" data-src="full-size.jpg" class="img-magnifier" />

JavaScript调用 ​

javascript
// 简化版全局函数（推荐用于简单场景）
showImageMagnifier(event, element);
updateImageMagnifierPosition(event);
hideImageMagnifier();

// 完整版 ImageMagnifier 类（推荐用于复杂场景）
var magnifier = new ImageMagnifier('img.zoomable', {
    maxWidth: 800,
    maxHeight: 600,
    maxScale: 3
});

参考文档 ​

  • Dialog开发：oms-dialog-development.md
  • Finder开发：oms-finder-development.md

Examples ​

  • 当用户需要实现图片上传时，说明如何使用 input_image_magnifier 组件
  • 当用户需要处理图片上传时，说明如何在控制器中使用 uploadAndAttach 方法
  • 当用户需要获取关联图片时，说明如何使用 getAttachedImages 方法
  • 当用户需要添加图片放大镜时，说明HTML和JavaScript配置

Guidelines ​

  • 图片上传使用 input_image_magnifier 组件，配置简单
  • 图片处理使用 image 模型的 uploadAndAttach 方法
  • 图片获取优先级要清楚，按优先级顺序使用
  • 图片放大镜功能已全局加载，直接使用即可
  • 删除图片时使用 detach 方法，注意是否同时删除文件