Я пытаюсь отправить двоичный файл с содержанием JSON, отправляю user.id
, user.type
, file_name
и photo(user-logo)
. Я пытался следовать многим примерам, подобным этому https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native
в основном реализация на стороне клиента (реагировать-нативный)
- кнопка для выбора изображения.
- обрезать изображение с помощью
react-native-image-crop-picker
- загрузить обрезанное изображение в API, используя
apisauce
код
import React, { useState, useEffect } from "react"
import ImagePicker from "react-native-image-crop-picker"
import FormData from "form-data"
import { create } from "apisauce"
const EditProfile = props => {
let [progress, setProgress] = useState(0)
...
const pickImage = () => {
ImagePicker.openPicker({
width: 200,
height: 200,
...,
}).then(image => {
var form = new FormData()
form.append("photoable_type", "User")
form.append("photoable_id", user.id)
form.append("photo_name", image.filename)
form.append("photo",{
name: image.filename,
uri: image.path,
contentType: image.mime,
})
const api = create({
baseURL: baseURL,
headers: {
...authHeaders,
Accept: "application/json",
"Content-Disposition": "form-data"
},
})
api.post("/photos", form, {
onUploadProgress: e => {
console.log("=====================", e)
let pro = e.loaded / e.total
progress = pro
console.log(progress)
setProgress(progress)
},
})
.then(res => console.log("-----------res : "))
.catch(e => {
console.log("submitting form Error ", e)
})
})
return <Button onPress={() => pickImage()}><Text>Add Photo</Text></Button>
}
На стороне API, используя ruby-rails
def photo_params
params.permit(:photoable_type, :photoable_id, :photo, :photo_name)
end
Я получаю запрос как
Parameters: {"_parts"=>[["photoable_type", "User"], ["photoable_id", 2], ["photo_name", "IMG_0002.JPG"], ["photo", {"name"=>"IMG_0002.JPG", "uri"=>"path to /tmp/react-native-image-crop-picker/1DCB87D6-2FF5-4630-90FB-A395DE80396E.jpg", "contentType"=>"image/jpeg"}]], "photo"=>{}}
, где "Content-Type"=>"application/json",
по умолчанию измените его на "Content-Type": "multipart/form-data"
, я получаю такие параметры:
Parameters: {"{\"_parts\":"=>{"\"photoable_type\",\"User\""=>{","=>{"\"photoable_id\",2"=>{","=>{"\"photo_name\",\"IMG_0002.JPG\""=>{","=>{"\"photo\",{\"name\":\"IMG_0002.JPG\",\"uri\":\"path to tmp/react-native-image-crop-picker/B2EE6B17-50C6-4296-AFD9-D9834B374EA3.jpg\",\"contentType\":\"image/jpeg\"}"=>{"}"=>nil}}}}}}}}}
Я что-то упустил,