使用React Native、Expo ImagePicker、Rails、Axios和Paperclip上传图像

Question

到目前为止，有关Rails和Paperclip的一切都在后端运行。我已经设置好了，这样当你创建一个新的帖子时，该帖子中的图像将上传到AWS S3。它在后端运行良好。我还使用Expo的ImagePicker从用户的相机胶卷中获取图像。然而，当我试图在前端使用formData在React Native中发布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:中的React Native Submit处理程序

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以显示预览，并更新父组件(PostForm:)中的图像uri

_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通过Axios 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

好吧，我发现了这个问题并能够解决它。我缺少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