圖片上傳與反應原生，博覽會ImagePicker，Rails，Axios和回形針

Question

到目前爲止，一切工作在後端有關Rails和Paperclip。我已將其設置爲當您創建新帖子時，該帖子中的圖片將上傳到AWS S3。它在後端工作正常。我還使用Expo的ImagePicker從用戶相機膠捲中抓取圖像。然而，當我試圖在本土作出反應在前端使用FORMDATA發佈一些與愛可信，我得到這個錯誤：

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：

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獲得的圖像的URI顯示預覽以及更新父組件圖像URI這是PostForm：

_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 

郵政型號：

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 

參數的Rails與愛可信POST請求接收：

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