Question

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

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

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

这一切都没有用，所以我的问题是，我应该在反应方面处理上传到AWS的图像，如果是这样，我该如何将该图像与我保存到Rails数据库的其他信息相关联（标题和描述）。

谢谢！

Answer 1

首先，在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或CarrierWave gem添加图像附件。看起来像这样。

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

React / Rails API图像上传

1 个答案: