我们如何使用 HTTP 请求方法将 CSV 文件从 angular 应用程序传递到服务器上的节点应用程序 运行

Question

我在 angular 中创建了一个前端应用程序，并使用 HTTP 服务方法向服务器发送请求（包含 node.js 代码）。在前端，我创建了一个 csv 文件，该文件保存在 angular 组件的同一目录中。我想使用 HTTP 服务方法将文件发送到服务器（包含 node.js 代码）。我创建了以下代码：

客户端（前端）代码，开发于angular.js:

uploadCSVFileOnServer(){
    let file = new File([""], "./abc.csv"));
    let formData = new FormData();
    formData.append("userForm", file);
    let userData = {
        firstName : "ABC",
        lastName : "DEF",
        userFormData: formData
    }

    this.http.post('url', userData)
    .subscribe(()=>{
        console.log("File uploaded successfully");
    })
}

现在 http.post() 方法将请求发送到服务器上 node.js 运行 中编写的方法 (getFile())。 node.js代码（服务端代码）如下：

getFile(req, res){
    let file = req.body.userData.userFormData ;
    // PROBLEM: 'file' is an empty object here 
}

我的疑问是，我从客户端发送了一个 javascript 对象，其中还包含 FormData 对象（具有键 userFormData）。但是当我尝试在服务器端的 getFile() 方法中获取 FormData 对象时，我得到一个空对象，它也不是 FormData.

类型

问题是什么？ FormData.append() 不在客户端工作吗？

Answer 1

FormData 对象是一个奇异对象，不能作为 JavaScript 对象的 属性 发布。

改为将 JSON 数据附加到 FormData 对象：

uploadCSVFileOnServer(){
    let file = new Blob([""], {type: "application/csv"});
    let formData = new FormData();
    formData.append("csvFile", file, "abc.csv");
    let userData = {
        firstName : "ABC",
        lastName : "DEF",
        //userFormData: formData
    }
    formData.append("userData", JSON.stringify(userData));

    this.http.post('url', formData)
    .subscribe(()=>{
        console.log("FormData uploaded successfully");
    })
}