如何使用 Dropzone 在 React/Javascript 中显示/编辑 ActiveStorage S3 图像？

Posted 2023-02-15

【中文标题】如何使用 Dropzone 在 React/Javascript 中显示/编辑 ActiveStorage S3 图像？

【英文标题】：How can I display/edit an ActiveStorage S3 image in React/Javascript using Dropzone?

【发布时间】：2022-01-14 11:45:38

【问题描述】：

我目前正在使用 Ruby on Rails + React + Redux + Dropzone 来上传图片。

我有一个表单，允许您通过 Dropzone 附加图像并上传它们。该表单还将在 React 视图中显示您上传的预览。

此外，我已经成功地使用 dropzone 和 activestorage 将我的图像上传存储到 S3。

但是，当有人想要编辑同一个表单时，下一步是在同一个 dropzone 上传器中显示这些图像，这需要一组 javascript File 对象来显示图像。我的问题是我应该怎么做？我是否需要从 Rails API 返回一个 Blob，或者我可以如何使用 Image URL？我对如何进行有点模糊，希望得到任何指导。

谢谢！

【参考方案1】：

dropzone 只负责上传我们的图片

您只需要获取 S3 对象 URL 并将其作为常规图像显示在您的表单中

然后将 Dropzone 上传表单放在你的图片之后，让你的用户明白这是一个替换现有图片的表单

所以在您的 edit.html.erb 视图中，首先从 S3 获取图像 URL

<h3>Existing image:</h3>
<%= url_for(record.image) %>
# Dropzone form here

并在update 操作中附加新的图像文件

【讨论】：

谢谢，我想我现在明白了！