DEV Community
·
使用 Stimulus Outlets 实现图片拖放与预览
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
文章介绍了如何使用Stimulus实现图片上传前预览和拖放功能。通过设置HTML结构和创建dropzone_controller.js，处理拖放事件并更新输入字段。调整HTML以显示预览图像，实现拖放后自动预览。
🎯
关键要点
- 文章介绍了如何使用Stimulus实现图片上传前预览和拖放功能。
- 通过设置HTML结构和创建dropzone_controller.js，处理拖放事件并更新输入字段。
- 调整HTML以显示预览图像，实现拖放后自动预览。
- 使用data-controller和data-action属性来定义拖放区域和事件处理。
- drop()函数调用私有函数#updateInputField()，将拖放的图像注入输入字段。
- 通过添加data-dropzone-image-preview-outlet属性，连接图像预览控制器。
- 在dropzone_controller.js中调用image_preview_controller.js的show()函数以显示预览图像。
➡️
