Node.js 如何将映像从客户端发送到服务器节点

我正在尝试创建上传个人资料图片的方法，帮助用户上传他们的个人资料图片到网站上，但我遇到了问题，我不知道如何将图片从客户端发送到服务器，并使这些图片存储在cloudinary或firebase上

我的路线如下所示： ProfileAPI.js

所以关键点是存储的设置，它告诉上传到哪里+上传中的文件过滤器，对吗

还有route.post，它将'upload.single（'profileImg'），对吗？路由将包括updateUserProfile的我的控制器，可在以下位置找到： profilesController.js

现在来看前端代码（react.js）：

这是我在react应用程序中加载的表单：

UserProfile.js

constuserprofile=（serverUserData）=>{
const appState=useContext（GlobalContext）；
const{currentUser}=appState；
const{email，picture，name}=currentUser；
const[isVerified，setIsVerified]=使用状态（false）；
常量checkVerificationData=（）=>{
get（“/api/v1/profiles/profile”）。然后（（res）=>{
常数{data}=res；
if（数据验证数据）{
setIsVerified（data.verifiedDT）；
}
});
};
useffect（（）=>{
checkVerificationData（）；
}，[isVerified]）；
//上传用户头像功能
常量[imageSelected，setImageSelected]=useState（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
const formData=new formData（）；
formData.append（'email'，email）；
formData.append（'name'，name）；
formData.append（'profileImg'，imageSelected）；
axios
.post（`/upload`，formData）
。然后（（）=>console.log（“成功”））
.catch（err=>console.log（err））；
};
常数onFileChange=（e）=>{
setImageSelected（{profileImg:e.target.files[0]}）；
};
};
const classes=useStyles（）；
返回(

这里是用户可以上传个人资料照片的地方： UserCard.js

{图片(
提交
) : (
)}

因此，当输入内容并点击Add按钮时，我的api声明req.file未定义，我无法找出原因

---

有人能帮我找出错误吗？

编辑handleSubmit函数，为axios调用添加配置

const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('email', email);
    formData.append('name', name);
    formData.append('profileImg', imageSelected);

    axios
      .post(`/upload`, formData, {
         headers: {
           'Content-Type': "multipart/form-data"
         }
      })
      .then(() => console.log("success"))
      .catch(err => console.log(err));
  };

---

要上载文件，您需要使用contentType:“多部分/表单数据”。 使用以下作为参考来实现文件上传

helper函数，用于创建具有所需标头的实例。您可以在此处添加任何其他实例

const getInstance = () => {
  return axios.create({
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}

使用要上载的文件调用此方法

const fileUplaod = (file) => {

    let formData = new FormData();
    formData.append("images", file, file.name);
    
    getInstance()
      .post(endpoint_post_url, formData)
      .then((response) => {
        console.log("IMAGES_SUBMIT_SUCCESS");
      })
      .catch((err) => {
        console.error("image submit error", err);
      });
}

---

检查后端代码中的请求正文。您也可以将多个图像上载到同一属性。它将是请求对象中的一个数组。

要上载文件，您需要使用

contentType:“多部分/表单数据”
axios
post request first parameter.我该怎么写？@AmilaSenadheeraDid你可以在你的express应用程序中添加
body parser
。其他事情对我来说似乎没问题。是的，我做了。你介意跳一个缩放电话，我可以分享我的屏幕吗？@NathanNguyen，你能完成吗？让我知道你面临的任何问题。我很乐意帮助。我需要更改还是删除它？保留它。只需使用
imageSelected
而不是
file
。在您的UI中添加一个按钮，并将
fileUpload
指定为
onClick
handler您可以看看我的profileAPI吗？我写的路线正确吗？不，更改
upload.single（'profileImg'））
as
upload.single（'images'）
。或者在
formData
中根据需要更改名称。您可以检查我的profileAPI代码吗？我写的路线正确吗？
  {picture ? (
    <div>
      <Avatar
        src={picture}
        alt="Avatar"
        className="avatar--profile_image"
      />  
      <input
        type="file"
        onChange={onFileChange}
      />  
      <button onClick={handleSubmit}>Submit</button>
    </div>
  ) : (
    <AccountCircleIcon className="avatar--profile_image" />
  )}

const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('email', email);
    formData.append('name', name);
    formData.append('profileImg', imageSelected);

    axios
      .post(`/upload`, formData, {
         headers: {
           'Content-Type': "multipart/form-data"
         }
      })
      .then(() => console.log("success"))
      .catch(err => console.log(err));
  };

const getInstance = () => {
  return axios.create({
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}

const fileUplaod = (file) => {

    let formData = new FormData();
    formData.append("images", file, file.name);
    
    getInstance()
      .post(endpoint_post_url, formData)
      .then((response) => {
        console.log("IMAGES_SUBMIT_SUCCESS");
      })
      .catch((err) => {
        console.error("image submit error", err);
      });
}