Javascript 发送带有图像和文本的HTTP POST请求

如何将VueJs中的图像和文本发送到后端ExpressJs

现在，我所做的是创建两个http post请求

注意this.albumName和this.albumDesc只是文本，formData是图像

createAlbum() {
      const formData = new FormData();
      for (let file of Array.from(this.myAlbumImages)) {
        formData.append("files", file);
      }

      if (this.albumName) {
        axios
          .post("http://localhost:9001/image/album", {
            ALBUM: this.albumName,
            DESCRIPTION: this.albumDesc
          })
          .then(resp => console.log(resp))
          .catch(err => console.log(err));
        setTimeout(function() {
          axios
            .post("http://localhost:9001/image/album", formData)
            .then(resp => console.log(resp))
            .catch(err => console.log(err));
        }, 3000);

        this.albumName = "";
        this.albumDesc = "";
      } else {
        alert("Please fill the above form.");
      }
    },

这是我的后端

这将基于传递的数据创建文件夹，并创建一个命名的未定义的文件夹

router.post('/album', (req, res) => {
let sql = "INSERT INTO GALLERY SET ALBUM = ?, DESCRIPTION = ?";
let body = [req.body.ALBUM, req.body.DESCRIPTION]
myDB.query(sql, body, (error, results) => {
    if (error) {
        console.log(error);
    } else {
        let directory = `C:/Users/user/Desktop/project/adminbackend/public/${req.body.ALBUM}`;
        fse.mkdirp(directory, err => {
            if (err) {
                console.log(err);
            } else {
                console.log(directory);
            }
        })
    }
})

---

我认为这是因为NodeJS是异步的，这就是它创建未定义文件夹的原因。

对于第一部分，客户端可以帮助您创建此链接

对于服务器部分，我无法帮助您创建此链接

以及有关这方面的官方文件

---

您看到这种行为的原因是您正在向同一路由发送两个不同的请求。1包括相册和描述表单字段值，但不包括文件。第二个（在

setTimeout

中）将只包含文件，而不包含其他字段，因此像

req.body.ALBUM

这样引用它们将返回

undefined

您可以在一个请求中发送所有数据（文本字段和文件）。只要这样做：

const formData = new FormData();
for (let file of Array.from(this.myAlbumImages)) {
  formData.append("files", file);
}
formData.append("ALBUM", this.albumName);
formData.append("DESCRIPTION", this.albumDesc);
axios.post("http://localhost:9001/image/album", formData)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

始终使用内容类型。要在服务器端解析它，您需要解析多部分表单的Express中间件，并允许您访问字段和图像。例如

app.get('/report/:chart_id/:user_id', function (req, res) {
    res.sendFile(filepath);
});

const formData = new FormData();
for (let file of Array.from(this.myAlbumImages)) {
  formData.append("files", file);
}
formData.append("ALBUM", this.albumName);
formData.append("DESCRIPTION", this.albumDesc);
axios.post("http://localhost:9001/image/album", formData)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));