时间戳

首页 > 解决方案 > 使用 axios/fetch 和 multer 上传文件时服务器响应未定义

javascript - 使用 axios/fetch 和 multer 上传文件时服务器响应未定义

问题描述

这是我以前拥有的，它正在工作

服务器.js

const storage = multer.diskStorage({
    destination: (req, res, cb) => {
        cb(null, "./uploads");
    },
    filename: (req, res, cb) => {
        cb(null, res.originalname);
    }
});
const upload = multer({ storage: storage }).single("data");
app.post("/upload", (req, res) => {
    console.log(req.file);
    upload(req, res, err => {
        if (err) throw err;
        if (req.file) {
            console.log("Uploaded");
            // Refresh the page
            // res.redirect("back");
            res.send("uploaded");
        } else {
            console.log("Failed");
            res.send("failed");
        }
    });
});

应用程序.js

<form
      action='http://localhost:3001/upload'
      method='POST'
      encType='multipart/form-data>
      <div>
          <input type='file' name='data' />
      </div>
      <div>
          <button type='submit'>Submit</button>
      </div>
  </form>

但是这样做不允许我接收服务器响应，我必须做 res.redirect('back') 来“刷新”页面，否则页面会一直等待 localhost，标题栏上有一个加载圆圈。经过一番研究，我在反应方面得到了以下信息：

应用程序.js

    const FormSubmitHandler = e => {
    e.preventDefault();
    console.log(e.target.data.value);
    const form_data = new FormData();
    form_data.append("data", e.target.data.value);
    axios
        .post(`http://localhost:3001/upload`, e.target.data.value)
        .then(res => console.log(res))
        .catch(err => console.log(err));

    // console.log(form);
    // fetch("http://localhost:3001/upload", {
    //     method: "POST",
    //     body: form_data
    // })
    //     .then(res => res.text())
    //     .then(res => console.log(res))
    //     .catch(err => console.log(err));
};

但是，我不断从 fetch api 和 axios 收到来自服务器的“失败”响应。e.target.data.value 返回 C:/fakepath/test.csv。我可能会或可能不会忽略一些明显的事情，但已经做了几个小时，仍然无法弄清楚出了什么问题。请帮我解释一下这个问题，谢谢！

标签： javascriptreactjsexpressaxiosfetch

解决方案

服务器.js

const storage = multer.diskStorage({
    destination: (req, res, cb) => {
        cb(null, "./uploads");
    },
    filename: (req, res, cb) => {
        cb(null, res.originalname);
    }
});
const upload = multer({ storage: storage }).single("data");
app.post("/upload", upload , (req, res) => {
        if (err) throw err;
        if (req.file) {
            console.log("Uploaded");
            // Refresh the page
            // res.redirect("back");
            res.send("uploaded");
        } else {
            console.log("Failed");
            res.send("failed");
        }
    });
});

应用程序.js

const FormSubmitHandler = e => {
    e.preventDefault();
    const form_data = new FormData();
    form_data.append("data", e.target.files[0]); //changes
    axios
        .post(`http://localhost:3001/upload`, form_data ) //changes
        .then(res => console.log(res))
        .catch(err => console.log(err));

    // console.log(form);
    // fetch("http://localhost:3001/upload", {
    //     method: "POST",
    //     body: form_data
    // })
    //     .then(res => res.text())
    //     .then(res => console.log(res))
    //     .catch(err => console.log(err));
};

试试这个会帮助你。

推荐阅读