Я получаю эту ошибку, которую не могу решить, когда пытаюсь загрузить изображение из приложения, поддерживающего реакцию (с помощью средства выбора изображений), на сервер 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') при вызове, но это тоже не сработало.