如何将React Native应用程序上的本地图像文件上传到Rails api？

Question

例如，我无法理解如何使用Rails api在服务器端上传智能手机的本地文件路径。

我们要发送到后端的文件路径对服务器没有任何意义吗？

我从这样的响应中得到一个uri：

file：///Users/.../Documents/images/5249F841-388B-478D-A0CB-2E1BF5511DA5.jpg）：

我已经尝试将类似的内容发送到服务器：

  let apiUrl = 'https://vnjldf.ngrok.io/api/update_photo'

  let uriParts = uri.split('.');
  let fileType = uri[uri.length - 1];

  let formData = new FormData();
  formData.append('photo', {
    uri,
    name: `photo.${fileType}`,
    type: `image/${fileType}`,
  });

  let options = {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

但是我不确定它是什么以及如何在后端对其进行解密。

我也尝试过发送uri direclty，但当然出现以下错误：

Errno::ENOENT (No such file or directory @ rb_sysopen -...

任何帮助/指导将不胜感激。

Answer 1

我发现，如果您使用此json从React Native应用程序对Rails后端进行POST：

let formData = new FormData();
  formData.append('photo', {
    uri,
    name: `photo.${fileType}`,
    type: `image/${fileType}`,
  });

[Rails会在ActionDispatch::Http::UploadedFile中自动为您提供一个params[:photo]，您可以像Photo.create(photo: params[:photo])那样直接将其附加到模型上，并且很简单。

但是，如果您不传递文件名，那么一切都会中断，您会得到一个巨大的字符串，它将产生一个ArgumentError (invalid byte sequence in UTF-8)。
因此，根据您的代码，我可以立即发现该错误：您将name传递为photo.${fileType}，这是错误的，应该为photo.${fileName}（进行相应更新以获取图像文件名... [ C0]在您的React Native代码中将为您显示正确的代码。