How to upload local image file on React Native app to Rails api?

问题

I'm having trouble understanding how a local file path from a smartphone could possibly get uploaded on the server side with a Rails api for instance.

The file path that we're sending to the backend doesn't mean anything to the server?

I'm getting a uri from the response like this:

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

I have tried to send something like this to the server:

  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',
    },
  };

But I'm unsure what it is and how to decript it on the backend.

I have also tried sending the uri direclty but of course I'm getting the following error:

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

Any help/guidance would be much appreciated.

回答1:

I have recently spent 1+ hour debugging something similar.

I found out that if you make a POST to your Rails backend from your React Native app using this json:

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

Rails will automatically give you a ActionDispatch::Http::UploadedFile in your params[:photo], which you can attach directly to your model like Photo.create(photo: params[:photo]) and it simply works.

However, if you don't pass a filename, everything breaks and you'll get a huge string instead and it will raise a ArgumentError (invalid byte sequence in UTF-8).

So, based on your code, I can spot the bug right on: you are passing name as photo.${fileType}, which is wrong, and should be photo.${fileName} (update accordingly to get your image filename ... console.log(photo) in your React Native code will show you the correct one.

来源：https://stackoverflow.com/questions/52334811/how-to-upload-local-image-file-on-react-native-app-to-rails-api