ReactNative: переменная для FormData (), которая регистрируется как неопределенная в приложении ReactNative, когда я делаю http-запрос с файлом - PullRequest
Новая
       2

ReactNative: переменная для FormData (), которая регистрируется как неопределенная в приложении ReactNative, когда я делаю http-запрос с файлом

0 голосов
/ 21 февраля 2019

Я пытался сделать пост-запрос из своего собственного приложения реагирования на эмуляторе Android, но объект, который я отправляю в теле запроса, оценивается как неопределенный, много пытался решить эту проблему, но безуспешно,Пожалуйста, помогите мне

вот код моей формы в приложении, известном как "API.js", названного так, просто для тестирования конечных точек API 

import React, { Component } from "react";
import {
  Text,
  TextInput,
  View,
  TouchableHighlight,
  StyleSheet,
  Button,
  FormData
} from "react-native";
import Permissions from "react-native-permissions";
import ImagePicker from "react-native-image-crop-picker";
import axios from "axios";

var styles = StyleSheet.create({});
var msg = "Select Image";
var data;

export default class API extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      price: "",
      size: "",
      description: "",
      image: "",
      popularity: ""
    };
  }
  FormDataFunc() {
    let form = new FormData();
    form.append("name", this.state.name);
    form.append("price", this.state.price);
    form.append("size", this.state.size);
    form.append("description", this.state.description);
    form.append("image", this.state.image);
    form.append("popularity", this.state.popularity);
    return form; 
    return form;
  }
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  Submit() {
    axios({
      method: "post",
      url: "http://192.168.0.102:3000/products",
      data: this.FormDataFunc,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: this.FormDataFunc
    })
      .then(() => {
        console.log("DONE!");
        this.props.navigation.navigate("offersScreen");
      })
      .catch(err => {
        console.log(err);
        console.log(this.FormDataFunc);
      });
  }
  componentDidMount() {
    Permissions.check("photo").then(response => {
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      console.log(response);
    });
  }

  render() {
    const image = () => {
      ImagePicker.openPicker({
        multiple: false,
        includeBase64: true
      }).then(images => {
        console.log(images);
        this.setState({
          images: { data: `\`${images.mime}\`;base64,\`${images.data}\`` }
        });
        console.log(this.state.images);
        msg = "Selected";
      });
    };
    return (
      <View>
        <TextInput placeholder="Name" name="name" />
        <TextInput placeholder="Price" name="price" />
        <TextInput placeholder="Size" name="size" />
        <TextInput placeholder="Description" name="description" />
        <TouchableHighlight onPress={image} name="image">
          <Text>{msg}</Text>
        </TouchableHighlight>
        <TextInput placeholder="Popularity" name="popularity" />
        <TouchableHighlight title="Submit" onPress={this.Submit}>
          <Text>Send</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

вот код моеговнутренний маршрут "product.js", который получает запрос (node.js и express) 

const express = require("express");
const router = express.Router();
const bodyParser = require("body-parser");
const path = require("path");
const cloudinary = require("cloudinary");
const mongoose = require("mongoose");

//Product Model

const product = require("../models/product").product;
router.use(bodyParser.json());

//GET route

router.get("/", (req, res) => {
  product.find().then(product => res.json(product));
});

// POST route
cloudinary.config({
  cloud_name: "cloud222",
  api_key: "783935981748815",
  api_secret: "uY47vBS1rI2x5jvFtnXQIjMMqU0"
});

router.post("/", (req, res) => {
  //MISC//
  let imageUrl;
  console.log("starting");
  //MISC//

  //CLOUDINARY UPLOAD
  cloudinary.v2.uploader.upload(req.body.image, (error, result) => {
    if (error) {
      console.log(error);
      console.log(`${req.body.image}`);
    } else {
      imageUrl = result.secure_url;
      //MONGO UPLOAD
      var productv = {
        name: req.body.name,
        price: req.body.price,
        size: req.body.size,
        description: req.body.description,
        image: imageUrl,
        popularity: req.body.popularity
      };
      const productvar = new product(productv);
      productvar
        .save()
        .then(product => console.log(product))
        .then(product => res.json(product))
        .catch(err => console.log(err));
    }
  });

  //END//
});

module.exports = router;

данные регистрируются как неопределенные и, следовательно, запрос не получает ответ

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Проблема решена

Пришлось использовать onChangeText = вместо onChange, так как onChange не возвращает строку

0 голосов
/ 21 февраля 2019

Я думаю, что проблема в том, что вы создали FormData и хотите опубликовать его, но вы добавили заголовки «application / json».Вы должны изменить это: 

 headers: {
         'content-type': 'multipart/form-data',
         'Accept':'multipart/form-data',
      },

Надеюсь, это работает для вас.

...