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

【问题标题】：How can I display/edit an ActiveStorage S3 image in React/Javascript using Dropzone?如何使用 Dropzone 在 React/Javascript 中显示/编辑 ActiveStorage S3 图像？
【发布时间】：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？我对如何进行有点模糊，希望得到任何指导。

谢谢！

【问题讨论】：

标签： javascript reactjs ruby-on-rails rails-activestorage react-dropzone

【解决方案1】：

dropzone 只负责上传我们的图片

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

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

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

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

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

【讨论】：

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