将文件从 React 发送到 Node 并得到空 obj答案

【问题标题】：sent file from React to Node and got empty obj将文件从 React 发送到 Node 并得到空 obj
【发布时间】：2022-11-12 03:18:59
【问题描述】：

我正在获取 img 数据并将此数据发送到服务器
console.log 显示数据存在

 const [fileData, setFileData] = useState("");
 console.log("fileData:", fileData);
 const getFile = (e: any) => {
 setFileData(e.target.files[0]);
 };

 const uploadFile = (e: any) => {
e.preventDefault();
const data = new FormData();
data.append("file", fileData);
axios({
  method: "POST",
  url: "http://localhost:5000/api/setImage",
  data: data,
  headers: {
    "content-type": "multipart/form-data", // do not forget this
  },
}).then((res) => {
  alert(res.data.message);
});
};

服务器端点

router.post("/setImage", userController.setImage);

async setImage(req, res, next) {
try {
  let uploadFile = req.body;
  console.log(uploadFile);
} catch (e) {
  next(e);
}

}

console.log 显示空对象，但我正在等待 img 数据

【问题讨论】：

有一个名为Multer for Express 的包，你应该看看它:) 我最近遇到了同样的问题

标签： node.js reactjs axios

【解决方案1】：

尝试将multer 与fs 和tempy 一起使用。

router.post("/setImage", multer({ dest: tempy.file() }).single("file"), async (req, res, next) => {
    if (!req.file) return
    fs.readFile(req.file.path, function (err, filedata) {
        if (!req.file) return
        // Here you should get your expected data in filedata variable
    })
})

【讨论】：