使用 Stimulus Outlets 拖放图像并进行预览

本文最初发表于 Rails Designer

---

在上一篇文章中，我探索了一种在使用 Stimulus 上传之前预览图像的方法。

我知道想通过添加拖放来扩展其功能。在此过程中，我还使用 Stimulus 插座将这两种功能结合在一起。展示小型 Stimulus 控制器的更高级用法。

我假设您已经完成了前面提到的文章的所有步骤。

让我们从 HTML 开始。它使用其他 HTML，仅添加了一些属性。

<div data-controller="image-preview dropzone" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop">
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

让我们创建dropzone_controller.js。

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input"];

  dragOver(event) {
    event.preventDefault();
  }

  dragLeave(event) {
    event.preventDefault();
  }

  drop(event) {
    event.preventDefault();

    this.#updateInputField(event.dataTransfer.files[0]);
  }
}

所有这些方法所做的都是在调用这些操作时防止默认事件。 drop() 函数还调用私有函数 this.#updateInputField()。让我们添加它。

export default class extends Controller {
  // …

  // private
  #updateInputField(file) {
    const dataTransfer = new DataTransfer();

    dataTransfer.items.add(file);

    this.inputTarget.files = dataTransfer.files;
  }
  // …
}

这会将放置的图像注入到 inputTarget 字段中。就像这样，您可以将图像拖放到元素上。 ？

使用插座预览图像

但是缺少一个重要的部分......图像没有显示，看起来像一个错误。幸运的是 image_preview_controller.js 已经完成。这是一个简单的练习。

首先通过添加以下属性来调整 HTML：

<div data-controller="image-preview dropzone" data-dropzone-image-preview-outlet="#image-preview" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop" id="image-preview>
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

添加：

• data-dropzone-image-preview-outlet="#image-preview";
• id="图像预览"。

现在 dropzone_controller.js.
中需要两行

export default class extends Controller {
  static outlets = ["image-preview"];
  // …

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

现在，当您放置图像时，它会触发 image_preview_controller.js 上的 show() 函数。 ？

我喜欢使用像这样的小型 Stimulus 控制器，它们可以很好地协同工作。

---

Rails Designer 提供了这款 Stimulus 控制器，并添加了一些额外功能。立即获取副本。

以上是使用 Stimulus Outlets 拖放图像并进行预览的详细内容。更多信息请关注PHP中文网其他相关文章！