Why React doesn't upload image to server?-CodePudding

I have an app using react and express on the backend and multer to manage the upload. The server side is running properly when I make tests using postman, but if trait to send an image from react the result is unexpected. In that case the file doesn't appear in the uploads folder, however with postman is immediatly.

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 Response

The fields with name petimage are the same that I expecified in the backend and used these in the postman tests.

Edit

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

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

The last section of code is the route that is linked with the multer midleware asigned to ssave the images.

CodePudding user response：

When you are making a API call to the backend, it will upload the image to the specific folder that you are defining in the backend like :

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

I think you are getting results unexpected because the name for the image you are giving in formData formData.append('petimage', data.petimage); i.e petimage, it should be the same in the multer fileupload method. You haven't shared the backend code. So, I'm hoping that it may be like this:

var fileUpload = upload.single('petimage'); when the name is the same it will work fine.

If the image is of big size, you can compress it. Please visit this link, it will help you for sure. https://dev.to/franciscomendes10866/image-compression-with-node-js-4d7h

CodePudding user response：

You can try:

Remove

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

and use instead

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