React Native, Expo ImagePicker, Rails, Axios 및 Paperclip으로 이미지 업로드

Question

지금까지 Rails 및 Paperclip과 관련된 모든 것이 백엔드에서 작동합니다. 새 게시물을 만들면 해당 게시물 내의 이미지가 AWS S3에 업로드되도록 설정했습니다. 그것은 백엔드에서 잘 작동합니다. 엑스포의 ImagePicker를 사용하여 사용자 카메라 롤에서 이미지를 가져옵니다.

가 기본 반작용 :

이

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" 

여기 내 코드의 좀 더 조각을이다 : 나는 프런트 엔드에서 formData를 사용하여 기본 반작용에 Axios의 뭔가를 게시하려고 해요 그러나,이 오류를 받고 있어요 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를 얻을뿐만 아니라 PostForm 인 부모 구성 요소의 이미지 URI 업데이트하기 :

012,301,305,783을

액션과 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 

매개 변수 레일 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