React Native、Expo ImagePicker、Rails、Axios、Paperclipで画像をアップロード

Question

これまでのところ、すべてがRailsとPaperclipに関するバックエンドで動作します。新しい投稿を作成すると、その投稿内の画像がAWS S3にアップロードされるように設定しました。バックエンドで正常に動作します。また、ExpoのImagePickerを使用して、ユーザーのカメラロールから画像を取得しています。フロントエンドでFORMDATAを使用してネイティブに反応して、私はAxiosで何かを投稿しようとしているときしかし、私はこのエラーを取得しています：

ネイティブリアクト：

Paperclip::AdapterRegistry::NoHandlerError - No handler found for 
"file:///Users/jimmy/Library/Developer/CoreSimulator/Devices/A3590E6A- 
281B-4EFB-868C-9F5311718832/data/Containers/Data/Application/CB5ED945- 
AA87-4E36-83B6-71426759C70C/Library/Caches/ExponentExperienceData/%2540anonymous%252Fartis 
-ed15f4f4-b8d6-460f-a1b3-e06d546eda2a/ImagePicker/B3162237-9BCD-4721- 
BDF2-D66BC047A6C0.jpg" 

ここに私のコードのいくつかのより多くのスニペットですPostFormでハンドラを提出してください：プレビューを表示するだけでなく、PostFormある親コンポーネント内の画像のURIを更新するために、画像のURIを取得する

onSubmit() { 
    const { navigate } = this.props.navigation; 
    return() => { 
     const formData = new FormData(); 
     formData.append("post[title]", this.state.title); 
     formData.append("post[body]", this.state.body); 
     formData.append("post[user_id]", this.props.currentUser.id); 
     formData.append("post[image]", this.state.image); 
     this.props.createPost(formData).then((res) => { 
     if (res.type) { 
      navigate("Explore"); 
     } 
     }); 
    }; 
    } 

ImagePicker：

_pickImage = async() => { 
    let pickerResult = await ImagePicker.launchImageLibraryAsync({ 
     allowsEditing: true, 
     aspect: [4, 3], 
    }); 
    if (pickerResult.cancelled) { 
     return; 
    } 
    this.setState({image: pickerResult.uri}); 
    this.props.updatePostWithImage(pickerResult.uri); 
    }; 

アクションとAPIコール：

export const createPost = (post) => dispatch => (
    postPost(post).then((res) => { 
    return dispatch(receivePost(res.data)); 
    }).catch((errors) => { 
    }) 
); 

const url = "http://localhost:3000"; 

export const postPost = (post) => { 
    return axios({ 
    method: 'POST', 
    url: `${url}/api/posts`, 
    dataType: "JSON", 
    contentType: false, 
    processData: false, 
    data: post 
    }); 
}; 

ポストコントローラー：

def create 
    @post = Post.new(post_params) 
    if @post.save 
    render :show 
    else 
    render json: @post.errors.full_messages, status: 422 
    end 
end 

def post_params 
    params.require(:post).permit(:title, :body, :image, :user_id) 
end 

ポストモデル：RailsはAxios POSTリクエストを受信

class Post < ApplicationRecord 
    validates :title, :body, presence: true 

    belongs_to :user 

    has_attached_file :image, default_url: "https://res.cloudinary.com/jun/image/upload/v1506659435/Doge_sggjpf.jpg" 
    validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/ 
end 

パラメータ：

Parameters: {"post"=>{"title"=>"Test", "body"=>"Testing", "user_id"=>"1", "image"=>"file:///Users/jimmy/Library/Developer/CoreSimulator/Devices/A3590E6A-281B-4EFB-868C-9F5311718832/data/Containers/Data/Application/CB5ED945-AA87-4E36-83B6-71426759C70C/Library/Caches/ExponentExperienceData/%2540anonymous%252Fartis-ed15f4f4-b8d6-460f-a1b3-e06d546eda2a/ImagePicker/B3162237-9BCD-4721-BDF2-D66BC047A6C0.jpg"}} 

何が起こっているのか分かりません。パラメータは私にはうまく見えますが、クリップクリップが必要とする多くのものが欠けていると思います。しかし、私はそれらを得る方法がわかりません。私はすべてを調べてみましたが、解決に役立つ解決策を見つけることができませんでした。私はまだこれらの技術のいくつかを使用することにかなり新しいですので、私と一緒に頑張ってください。

この問題をデバッグするために追加できるその他の情報がある場合は、教えてください。前もって感謝します！

Answer 1

Welp、私は問題を発見し、修正することができました。 Paperclipがバックエンドで必要としていた追加情報が不足していました。私が行った唯一の変更は、onSubmitハンドラ関数にありました。

onSubmit() { 
    const { navigate } = this.props.navigation; 
    return() => { 
     let uriParts = this.state.image.split('.'); 
     let fileType = uriParts[uriParts.length - 1]; 
     console.log(fileType); 
     const formData = new FormData(); 
     formData.append("post[title]", this.state.title); 
     formData.append("post[body]", this.state.body); 
     formData.append("post[user_id]", this.props.currentUser.id); 
     formData.append("post[image]", { 
     uri: this.state.image, 
     name: `${this.state.title}.${fileType}`, 
     type: `image/${fileType}`, 
     }); 
     this.props.createPost(formData).then((res) => { 
     if (res.type) { 
      navigate("Explore"); 
     } 
     }); 
    }; 
    } 

画像のURI、名前、ファイルタイプを設定すると、すべてが修正されました。カメラロールから画像を選択し、その画像を使用してポストを作成することができます。この画像はクリップを使用してAWS S3にアップロードされます。 ：D