Xem trước hình ảnh API mẫu

Tôi đã đọc nhiều cuộc thảo luận về xem trước hình ảnh trong fapi với 'managed_file', nhưng tôi không thể tìm thấy câu trả lời kết luận về cách thực hiện điều này đúng trong D8.

Một giải pháp rõ ràng sẽ là tái sử dụng Drupal\image\Plugin\Field\FieldWidget\ImageWidget, nhưng tôi không biết làm thế nào để thực hiện điều này.

Vì vậy, câu hỏi của tôi là: làm thế nào tôi có thể có một trường tải lên hình ảnh với xem trước hình ảnh ở dạng của tôi trong D8 và mảng kết hợp trong buildFormchức năng của tôi sẽ như thế nào?

8 forms media

— maartend
nguồn

Sau khi tìm kiếm một lúc, tôi đã tìm thấy một số giải pháp khắc phục cho vấn đề này tại đây: https://stackoverflow.com/a/38268567/2267244

Tôi đã thử nghiệm nó và nó hoạt động, đây là phiên bản sửa đổi bit mà tôi đã sử dụng.

Ngoài ra tôi không chắc chúng ta có nên đánh dấu câu hỏi này là dpulicate hay không khi tôi tìm thấy giải pháp trên stackoverflow.com.

Dù sao đây là cách trường biểu mẫu của bạn nên nới lỏng như sau:

$form['image_with_preview'] = [
  '#type' => 'managed_file',
  '#title' => t('Image with preview'),
  '#upload_validators' => [
    'file_validate_extensions' => ['gif png jpg jpeg'],
    'file_validate_size' => [25600000],
  ],
  '#theme' => 'image_widget',
  '#preview_image_style' => 'medium',
  '#upload_location' => 'public://',
  '#required' => FALSE,
];

Và bạn cũng sẽ cần phải thực hiện hook_preprocess_HOOKtrong mô-đun của mình như thế này:

function YOUR_MODULE_preprocess_image_widget(&$variables) {
    $element = $variables['element'];

    $variables['attributes'] = array('class' => array('image-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix'));

    if (!empty($element['fids']['#value'])) {
      $file = reset($element['#files']);
      $element['file_' . $file->id()]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
      $file_variables = array(
        'style_name' => $element['#preview_image_style'],
        'uri' => $file->getFileUri(),
      );

      // Determine image dimensions.
      if (isset($element['#value']['width']) && isset($element['#value']['height'])) {
        $file_variables['width'] = $element['#value']['width'];
        $file_variables['height'] = $element['#value']['height'];
      } else {
        $image = \Drupal::service('image.factory')->get($file->getFileUri());
        if ($image->isValid()) {
          $file_variables['width'] = $image->getWidth();
          $file_variables['height'] = $image->getHeight();
        }
        else {
          $file_variables['width'] = $file_variables['height'] = NULL;
        }
      }

      $element['preview'] = array(
        '#weight' => -10,
        '#theme' => 'image_style',
        '#width' => $file_variables['width'],
        '#height' => $file_variables['height'],
        '#style_name' => $file_variables['style_name'],
        '#uri' => $file_variables['uri'],
      );

      // Store the dimensions in the form so the file doesn't have to be
      // accessed again. This is important for remote files.
      $element['width'] = array(
        '#type' => 'hidden',
        '#value' => $file_variables['width'],
      );
      $element['height'] = array(
        '#type' => 'hidden',
        '#value' => $file_variables['height'],
      );
    }

    $variables['data'] = array();
    foreach (\Drupal\Core\Render\Element::children($element) as $child) {
      $variables['data'][$child] = $element[$child];
    }
}

Tôi đã thử nghiệm nó trên phiên bản Drupal cục bộ của tôi và nó hoạt động tốt, xem trước hình ảnh được hiển thị sau khi tải lên AJAX xong.

— otarza
nguồn