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中反应原生提交处理程序：

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

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

使用React Native，Expo ImagePicker，Rails，Axios和Paperclip进行图像上传

1 个答案: