1

我已经构建了一个 React 前端以及一个仅支持 Rails API 的后端。我想允许用户创建任务并输入标题、描述并上传图片。

因此，我尝试使用 DropZone 访问图像，然后使用 Axios 通过发布请求将图像信息以及标题和描述发送到我的 Rails API。

我在 Rails API 上设置了 Carrierwave，希望在根据发布请求将我的任务添加到数据库后上传到 AWS S3 存储桶。

这些都不起作用，所以我的问题是，我应该在反应端处理上传到 AWS 的图像吗？如果是，我如何将该图像与我保存到 Rails 数据库的附加信息（标题和描述）相关联）。

谢谢！

4

1 回答 1

0

首先，在 React 方面，标题和描述应该没有问题，但是对于图像，您需要将图像编码为 Base64 字符串。是这样的。

getBase64 = (callback) => {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      console.log(fileReader.result);
    };
    fileReader.readAsDataURL(fileToLoad);
    fileReader.onerror = (error) => {
      console.log('Error :', error);
    };
}

然后，在 Axios 上，将这 3 个参数连同一个 POST 请求一起发送。

对于 Rails，您需要设置可以读取 Base64 字符串的代码。通常，您可以使用Paperclip或CarrierWavegem 来添加图像附件。它看起来像这样。

property_image = listing.property_images.new(param_image)

if param_image[:file_data]
  image_file = Paperclip.io_adapters.for(param_image[:file_data])
  image_file.original_filename = param_image[:image_file_name]
  image_file.content_type = "image/png"
  property_image.image = image_file
end

private

def param_image
  params.permit(:image, :image_file_name, :file_data)
end
于 2018-09-27T03:14:01.080 回答