使用axios发送文件，不使用FormData API

Question

我可以使用axios和FormData API将文件发送到服务器，例如:

    persist(avatar){
        let data = new FormData();
        data.append('avatar', avatar);
        axios.post(`/api/users/${this.user.name}/avatar`, data)
            .then(() => flash('Avatar uploaded!'));
    }

参数 avatar 传递给 persist() 方法，是一个来自类型为“file”的表单输入的文件对象。

然后我可以在服务器端获取该文件。

是否可以不使用 FormData 完成此操作？也就是模拟 FormData 的工作方式？基本上，我正在尝试理解 FormData API 执行的额外工作。也许使用 axios 并不可行，我应该使用普通的 XMLHttpRequest。

当然，仅仅发送文件对象是行不通的：

axios.post(`/api/users/${this.user.name}/avatar`, {avatar: avatar})

在服务器端，头像对象将是空的。我可以发送像头像名称这样的元数据，但无法发送整个对象。

- trogne

Answer 1

是的，客户端手动进行编码是可能的。如果你真的想了解表单的每一个细节，编写自己的表单数据编码器可能会很有用。然而，对于大多数应用程序，我不建议这样做。在生产中应使用FormData API。

您需要参考RFC 7578来实现编码器。

此规范定义了multipart/form-data媒体类型，它可以被各种应用程序使用，并通过各种协议传输，作为用户填写表单的结果集返回。

更多资源：

• multipart/form-data的含义
• npm上form-data库的源代码

- Seth Holladay

---

我有一个大的嵌套JSON负载要发布，其中一个是文件。这意味着我需要为每个字段手动编写创建表单数据对象吗？ - Arup Rakshit

不，你最好只使用一个 FormData 实例。然后，你需要使用 formData.append() 方法决定将哪些字段放入该对象中。我建议为文件和 JSON 分别设置一个字段，其中 JSON 是文件的元数据。 - Seth Holladay

@SethHolladay 你能给我一个例子吗？我也有一个很大的嵌套的JSON负载，突然间我得到了一个新的功能，那就是文件上传。我正在使用axios，我不想为每个字段手动创建表单数据对象。 - undefined