图片上传与反应原生，博览会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