为什么 React 不上传图片到服务器？

Question

我有一个应用程序在后端使用 React 和 Express，并使用 multer 来管理上传。当我使用邮递员进行测试时，服务器端是运行正确的，但是如果从反应发送图像的特征是意外的。在那种情况下，文件不会出现在上传文件夹中，但是邮递员会立即出现。

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 的字段与我在后端指定并在邮递员测试中使用的字段相同。

编辑

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

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

最后一段代码是与 multer 中间件链接的路由，用于保存图像。

Answer 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'); 当名称相同时，它可以正常工作。

如果图片比较大，可以压缩一下。请访问此 link，它一定会对您有所帮助。 https://dev.to/franciscomendes10866/image-compression-with-node-js-4d7h

Answer 2

你可以试试：

移除

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

并改用

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

Answer 3

解决方案是将图像特征化为对象。代码是下一个：

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

然后它按预期工作了。

为什么 React 不上传图片到服务器？

Why React doesn't upload image to server?

node.js

express

reactjs

multer

axios