使用 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