如何修复 Axios 中的图片上传问题

Posted 2023-03-25

【中文标题】如何修复 Axios 中的图片上传问题

【英文标题】：How to fix image upload in Axios

【发布时间】：2020-01-15 11:48:05

【问题描述】：

我在上传图片时遇到问题。我使用 axios 进行 api 请求，使用 multer & cloudinary 进行文件上传。

更新： 在我的依赖中： "axios": "^0.19.0"

我的 .js 文件中的必需依赖项： 从'axios'导入axios；

图片上传已在我的后端使用 express。但是在反应中它仍然不起作用。我已经检查了所有内容，看起来还不错。 下面是代码：

  const [text, setText] = useState('');
  const [image, setImage] = useState([]);

  const onSubmit = async e =>  
    e.preventDefault();
    let data = new FormData();
    console.log(image + ' ' + 'this is image pathname')
    data.append('image', image);

      axios.post('/api/posts/image', data)
     .then(res => 
        console.log(res.data + 'this is data after api call');
     )
     .catch(err => console.log(err));
  ;

return (
   <Fragment>
      <form onSubmit=e => onSubmit(e) className="create-post-form">
         <input
      type="file"
      placeholder="Write something..." 
      name="image"
      value=image
          onChange=e => setImage(e.target.value)
         />
        <br/>
    <button className="btn btn-post">Post</button>
      </form>
  </Fragment>
);

更新服务器端代码：

app.post('/image', upload.single('image'), async (req, res) => 

    try 
        const result = await cloudinary.v2.uploader.upload(req.file.path);
        res.send(result);
     catch(err) 
        res.status(500).send('Server Error');
    
);

错误信息：POST http://localhost:3000/api/posts/image500（内部服务器错误）

【问题讨论】：

如果你在服务器上登录，这个错误说明了什么？ console.error(err)

在你catch 代码中请写console.log(err) 并在此处粘贴错误所说的内容。

如果我执行 console.log(err) 没有错误。因为服务器端渲染正确。

您在使用npmjs.com/package/multer 吗？这就是image 转换为req.file 的方式吗？

您提到文件已正确上传，因此您的错误可能在于您发送响应的方式。 res.send(result); 可能会导致问题。该请求是否在您的浏览器开发工具中返回 500？ result 究竟是什么？

【参考方案1】：

首先我看不到这样的标题：

const config = 
            headers:  'content-type': 'multipart/form-data' 
           

所以应该是这样的：

   const config = 
            headers:  'content-type': 'multipart/form-data' 
           

   axios.post('/api/posts/image', data,config)
     .then(res => 
        console.log(res.data + 'this is data after api call');
     )
     .catch(err => console.log(err));

我也看不到你的服务器代码，但请检查你的包中有multer，并且你也表达了配置。

【讨论】：

@CJCruz 你能用服务器代码更新你的问题吗？谢谢。

问题已更新。服务器端运行良好，它正在将文件上传到云存储中。我仍然无法弄清楚为什么客户端不起作用。我还更新了上面所需的依赖项。谢谢。

我要说你的服务器不工作，因为你得到一个 500 错误，这意味着一个服务器错误......但后来我注意到你正在使用这个：catch(err) res.status(500).send('Server Error'); 因此，您真正要做的是用虚假的 500 内部服务器错误来掩盖错误，而您应该写出真正的错误是您要返回的错误。一旦你知道真正的错误是什么，你应该对如何继续有更好的线索/理解。

尝试放置 console.log(err)。但是服务器代码上传正确，没有报错。