使用Axios发送后，表单数据为空

qyyhg6bp 于 2022-10-21 发布在 iOS

关注(0)|答案(3)|浏览(374)

我正在使用Axios从VueJS应用程序发送FormData。问题是，当我输出FormData时，它是空的。我以前在发送文件时使用过相同的方法(我现在不发送文件)，然后FormData显示了我附加到其中的正确数据。我要追加的数据是字符串类型。
客户端

onUpload(): void {
      const fd = new FormData();
      fd.append("id", this.chosenRoute.id);
      fd.append("name", this.routeName);
      fd.append("description", this.routeDescription);
      fd.append("activity", this.activity);
      fd.append("preamble", this.preamble);
      axios.post('http://localhost:8080/editRoute', fd, {
      onUploadProgress: uploadEvent => {
        console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
      }
    }).then(
      res => {
      console.log(res);
    });
  }

服务器端

app.post('/editRoute', function(req,res){
    console.log(req.body);
    const routeId = req.body.id;
    console.log(routeId);
    Route.findById(routeId, (err, route) => {
        res.set("Access-Control-Allow-Origin", "*");
        route.update(req.body);
    });
});

axios

来源：https://stackoverflow.com/questions/53401293/form-data-is-empty-after-sending-it-with-axios

3条答案

按热度按时间

k4emjkb11#

摘自AXios文档：
缺省情况下，AXIOS将JavaScript对象序列化为JSON。
因此，不能将JS FormData对象直接传递给axios调用的选项。如果您必须使用FormData，请参阅此处的推荐方法：https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
然而，如果像您上面提到的那样，但是看起来像键/值对，则根本不要使用FormData，而是使用常规的JavaScript对象。

const body = {
    "id": this.chosenRoute.id.
    "name": this.routeName,
    "description": this.routeDescription,
    "activity": this.activity,
    "preamble": this.preamble
}

axios.post('http://localhost:8080/editRoute', body, ...

赞(0）回复(0）举报 2022-10-21

goqiplq22#

您不是应该对常规字段使用**.set()**而不是.append()吗？我以为您只对文件使用了.append()？
我还建议使用原生JSON来处理表单数据，正如另一个答案所提到的，它是一个更简单、更干净的解决方案。

赞(0）回复(0）举报 2022-10-21

unhi4e5o3#

从v0.27.0开始，如果请求Content-Type头设置为MultiPart/Form-Data，Axios支持自动将对象序列化到FormData对象。请参阅文档！

赞(0）回复(0）举报 2022-10-21