Ошибка при загрузке изображения из приложения, поддерживающего реакцию, на сервер express (multer) с использованием axios - PullRequest
0 голосов
/ 10 июля 2020

Я получаю эту ошибку, которую не могу решить, когда пытаюсь загрузить изображение из приложения, поддерживающего реакцию (с помощью средства выбора изображений), на сервер express, который обрабатывает файлы с помощью multer.

изображение ошибки

Код React-native:

import React, { useState, useEffect } from 'react';
import 'react-native-gesture-handler';
import { Text, TouchableOpacity, View, Image, Alert, TouchableHighlight } from 'react-native';
import style from './style';
import Icon from 'react-native-vector-icons/MaterialIcons';
import ImagePicker from 'react-native-image-picker';
import { Avatar } from 'react-native-paper';
import Axios from 'axios';

import { useForm } from "react-hook-form";

const logo = require('../../assets/logo.png')

function RaioX({ route, navigation }) {
    const [file, setFile] = useState();

    const { handleSubmit } = useForm();

    const imagePickerOptions = {
        title: "Selecione a imagem do Raio X",
        takePhotoButtonTitle: 'Tirar uma foto',
        chooseFromLibraryButtonTitle: 'Escolher uma foto da galeria',
        cancelButtonTitle: "Cancelar",
        mediaType: 'photo'
    }

    function imagePickerCallback(data) {
        if (data.didCancel) {
            return;
        }
        if (data.error) {
            return;
        }
        if (!data.uri) {
            return;
        }
        
        setFile(data);
    }

    const onSubmit = async () => {
      const formData = new FormData();
      formData.append('file', {
          name: file.fileName,
          uri: file.uri,
          type: file.type,
      });
      formData.append('id_doctor', 0);

      await Axios.post(`http://localhost:3000/diagnosis`, formData)

      navigation.navigate('Prontuarios')
    }

    return (
        <View style={style.container}>
            <Icon name='arrow-back' style={style.back} onPress={() => navigation.navigate('CadProntuario')} />
            <Text style={style.title}>Raio X</Text>
            <TouchableOpacity
                style={style.addImageButton}
                onPress={() => ImagePicker.showImagePicker(imagePickerOptions, imagePickerCallback)}>

                <Icon name='add-a-photo' color="#A1A1A1" size={30} style={style.icon}
                />
            </TouchableOpacity>

            <Image
                source={{
                    uri: file
                        ? file.uri
                        : null
                }}
                style={style.imagem}

            />


            <TouchableOpacity
                style={style.continuarButton}
                onPress={handleSubmit(onSubmit)}>
                <Text style={style.textButton}> Continuar </Text>
            </TouchableOpacity>
        </View>
    )
}

export default RaioX

Node.js код:

const { Router } = require('express');
const multer = require('multer');
const routes = Router();

routes.post('/diagnosis', multer(multerConfig).single('file'), (req, res) => {
  const { body } = req;

  const {
    originalname: name, size, key, location: url = 'test',
  } = req.file;

  const validation = validate({
    name,
    size,
    key,
    url,
    ...body,
  });
  if (validation !== true) {
    return res.status(400).json({
      code: 400,
      message: validation,
    });
  }

  const diagnosis = await create({
    image: {
      name,
      size,
      key,
      url,
    },
    ...body,
  });
  if (diagnosis !== false) {
    return res.status(200).json({
      code: 200,
      diagnosis,
    });
  }
  return res.status(500).json({
    code: 500,
    message: 'Internal Server Error',
  });
});

Я уже пытался используйте fetch вместо ax ios и установите несколько заголовков ('Content-Type': 'multipart / form-data') при вызове, но это тоже не сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...