Drupal 8中如何通过AJAX按钮按fid向节点表单添加图片

当前实现 #

• 已重写ImageWidget插件，通过formMultipleElements方法向字段添加图片
• 页面刷新或使用默认上传功能时，该方式可正常工作

需求 #

• 点击AJAX按钮无需刷新页面，即可将指定FID的图片添加到图片字段
• 添加的图片需立即在表单中显示（含预览图）
• 提交节点表单时，这些图片能被正确保存

已尝试操作 #

1. 向表单添加AJAX按钮
2. 在按钮回调中尝试返回修改后的formMultipleElements元素以更新图片字段
3. 尝试通过$form_state保存数据，并用#default_value更新字段值

遇到的问题 #

• 点击按钮后，图片字段消失或未按预期更新
• 通过formMultipleElements添加的图片仅在页面刷新或UI上传新图片后才显示

解决方案 #

核心思路 #

要实现AJAX无刷新更新，关键是正确更新$form_state中的字段值并触发表单重建，而非直接修改表单元素。Drupal的AJAX表单依赖$form_state维护状态，直接修改元素会导致状态不一致。

步骤1：修改AJAX按钮回调逻辑 #

不要直接返回修改后的字段元素，而是在回调中更新$form_state里的字段值，再触发表单重建：

public function ajaxAddImageCallback(array &$form, FormStateInterface $form_state) {
    // 获取要添加的FID列表（替换为你的业务逻辑）
    $uniq_id = '675d4801b3b4a';
    $fids = \Drupal::database()
        ->select('tmp_image', 'ti')
        ->fields('ti', ['fid'])
        ->condition('uuid', $uniq_id)
        ->execute()
        ->fetchCol();

    // 获取当前字段的现有值
    $field_name = 'field_images'; // 替换为你的图片字段名
    $current_values = $form_state->getValue($field_name, []);

    // 遍历FID，验证并添加到字段值中
    foreach ($fids as $fid) {
        $file = File::load($fid);
        // 验证文件合法性：存在、是图片、属于当前用户
        if ($file && str_starts_with($file->getMimeType(), 'image/') && $file->getOwnerId() == \Drupal::currentUser()->id()) {
            $current_values[] = [
                'target_id' => $fid,
                'alt' => '',
                'title' => '',
                'width' => $file->get('width')->value,
                'height' => $file->get('height')->value,
            ];
        }
    }

    // 更新form_state中的字段值
    $form_state->setValue($field_name, $current_values);
    // 标记表单需要重建
    $form_state->setRebuild();

    // 返回需要更新的表单区域（图片字段的父容器）
    return $form[$field_name];
}

步骤2：调整ImageWidget的formMultipleElements方法 #

无需在该方法中直接添加元素，让它基于$form_state中的值自动渲染：

class CustomImageWidget extends ImageWidget {
    public function formMultipleElements(array $items, array &$form, FormStateInterface $form_state) {
        $elements = parent::formMultipleElements($items, $form, $form_state);

        // 保留你的自定义逻辑，但不要硬编码添加FID，依赖$items或$form_state的值渲染
        return $elements;
    }
}

步骤3：正确配置AJAX按钮 #

确保按钮的#ajax属性指向回调，并指定要更新的区域：

$form['add_image_button'] = [
    '#type' => 'button',
    '#value' => '添加指定图片',
    '#ajax' => [
        'callback' => [$this, 'ajaxAddImageCallback'],
        'wrapper' => $form['field_images']['#id'], // 图片字段的容器ID
        'method' => 'replace',
        'effect' => 'fade',
    ],
];

关键注意事项 #

1. 依赖form_state维护状态：所有字段值修改必须通过$form_state->setValue()，而非直接修改表单元素，确保Drupal正确跟踪状态变化。
2. 触发表单重建：调用$form_state->setRebuild()让Drupal重新构建表单，渲染新的字段值。
3. 验证文件合法性：添加FID前验证文件存在性、归属权、类型，避免无效数据。
4. 正确返回更新区域：AJAX回调必须返回要替换的表单父容器，而非单个元素。

完整代码示例 #

// 节点表单中的AJAX按钮定义
public function buildForm(array $form, FormStateInterface $form_state) {
    // 继承节点表单原有元素
    $form = parent::buildForm($form, $form_state);

    $form['add_image_button'] = [
        '#type' => 'button',
        '#value' => '添加指定图片',
        '#ajax' => [
            'callback' => [$this, 'ajaxAddImage'],
            'wrapper' => $form['field_images']['#id'],
            'method' => 'replace',
        ],
    ];

    return $form;
}

// AJAX回调函数
public function ajaxAddImage(array &$form, FormStateInterface $form_state) {
    $uniq_id = '675d4801b3b4a';
    $fids = \Drupal::database()
        ->select('tmp_image', 'ti')
        ->fields('ti', ['fid'])
        ->condition('uuid', $uniq_id)
        ->execute()
        ->fetchCol();

    $current_values = $form_state->getValue('field_images', []);

    foreach ($fids as $fid) {
        $file = File::load($fid);
        if (!$file || str_starts_with($file->getMimeType(), 'image/') === false || $file->getOwnerId() != \Drupal::currentUser()->id()) {
            continue;
        }

        $current_values[] = [
            'target_id' => $fid,
            'alt' => '',
            'title' => '',
            'width' => $file->get('width')->value,
            'height' => $file->get('height')->value,
        ];
    }

    $form_state->setValue('field_images', $current_values);
    $form_state->setRebuild();

    return $form['field_images'];
}

// 重写的ImageWidget类
class CustomImageWidget extends ImageWidget {
    public function formMultipleElements(array $items, array &$form, FormStateInterface $form_state) {
        $elements = parent::formMultipleElements($items, $form, $form_state);
        // 自定义逻辑（如调整元素样式），但不硬编码添加FID
        return $elements;
    }
}

内容的提问来源于stack exchange，提问作者Вероника M