Почему отправка Multipart / form-data не работает - PullRequest
Новая
       15

Почему отправка Multipart / form-data не работает

3 голосов
/ 19 января 2020

Я пытаюсь отправить двоичный файл с содержанием 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}}}}}}}}}

Я что-то упустил,

...