为什么 React 不将图像上传到服务器？答案

【问题标题】：Why React doesn't upload image to server?为什么 React 不将图像上传到服务器？
【发布时间】：2022-01-14 21:31:17
【问题描述】：

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

上传页面，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>

谷歌回复

名称为 petimage 的字段与我在后端指定并在邮递员测试中使用的相同。

编辑

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

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

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

【问题讨论】：

标签： node.js reactjs express axios 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

【讨论】：

实际上背面提供的名称与我在反应字段中使用的名称相同，并且此应用程序接近您的建议。几分钟后，我将使用部分返回代码编辑我的问题。感谢您的帮助。

【解决方案2】：

你可以试试：

删除

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

改为使用

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

【讨论】：

我收到“未处理的拒绝（TypeError）：data.petimage.forEach 不是函数”。可能是什么错误？
ForEach 方法在该文件格式中有效？？我理解您的逻辑并认为这是正确的，只是对图像中的 forEach 有疑问。可能需要在运行 bucle 之前转换一个对象。

【解决方案3】：

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

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

然后它按预期工作。

【讨论】：