Почему React не загружает изображение на сервер?

#node.js #reactjs #express #axios #multer

#node.js #reactjs #экспресс #axios #мультер

Вопрос:

У меня есть приложение, использующее react и express на серверной части и multer для управления загрузкой. Серверная часть работает правильно, когда я провожу тесты с использованием postman, но если я хочу отправить изображение из react, результат будет неожиданным. В этом случае файл не отображается в папке uploads, однако с postman немедленно.

UploadPage, jsx

  const { register, handleSubmit } = useForm();

 const onSubmit = async (data)  => {
        const formData = new FormData();
        formData.append('petimage', data.petimage);
        try {
            const res = await axios.post('/api/petregister', formData);
            console.log(res)
        } catch (error) {
            setError(error.response.data.error);
            setTimeout(() => {
                setError("");
            }, 5000);
        } 
    }
    
    return (
        <Container className="mt-5">
                    <Form onSubmit={handleSubmit(onSubmit)}>
                        <Form.Group controlId="formFile" className="mb-3">
                            <Form.Label>Imagen de tu Mascota</Form.Label>
                            <Form.Control type="file" 
                                label="Select image"
                                name="petimage"
                                 {...register("petimage")}
                            />
                        </Form.Group>
                        <Button variant="primary" type="submit">
                            Submit
                        </Button>
                    </Form>
       </Container>

Ответ Google

Поля с именем petimage такие же, как я ожидал в серверной части и использовал их в тестах postman.

Редактировать

 const store = require('../middlewares/multer');

route.post('/petregister', store.array('petimage', 12), petregister);

Последний раздел кода — это маршрут, который связан с промежуточным программным обеспечением multer, назначенным для сохранения изображений.

Ответ №1:

Когда вы выполняете вызов API для серверной части, он загружает изображение в определенную папку, которую вы определяете в серверной части, например :

 const multer = require('multer');
const upload = multer({ dest: 'folder path' });

Я думаю, вы получаете неожиданные результаты, потому что имя изображения, которое вы указываете в FormData formData.append('petimage', data.petimage); , т.е. petimage, должно быть одинаковым в методе multer fileupload. Вы не поделились бэкэнд-кодом. Итак, я надеюсь, что это может быть так:

var fileUpload = upload.single('petimage'); когда имя будет тем же самым, оно будет работать нормально.

Если изображение имеет большой размер, вы можете сжать его. Пожалуйста, перейдите по этой ссылке, это вам обязательно поможет. https://dev.to/franciscomendes10866/image-compression-with-node-js-4d7h

1. фактически имя, указанное на обратной стороне, является тем же самым, которое я использую в поле react, и применение этого близко к вашему предложению. Через пару минут я отредактирую свой вопрос с помощью частей обратного кода. Спасибо за ваш полезный ответ.

Ответ №2:

Вы можете попробовать:

Удалить

 formData.append('petimage', data.petimage);

и использовать вместо этого

 data.petimage.forEach(pet => formData.append("petimage", pet))

1. Я получаю «Необработанное отклонение (ошибка типа): data.petimage.forEach не является функцией». В чем может быть ошибка?

2. Метод ForEach допустим в этом формате файла?? Я понимаю вашу логику и считаю, что это правильно, только есть сомнения по поводу forEach в изображении. Возможно, нужно преобразовать в объект перед запуском пакета.

Ответ №3:

Решением было выделить изображение как объект. Код следующий:

 Object.values(data.petimage).forEach(pet => formData.append('petimage', pet))

Тогда все сработало, как ожидалось.