用 axios 发送文件，没有 FormData api答案

【问题标题】：sending a file with axios, without FormData api用 axios 发送文件，没有 FormData api
【发布时间】：2019-01-04 15:59:37
【问题描述】：

我可以使用 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!'));
    }

传递给persist()的头像参数是来自“文件”类型的表单输入的文件对象。

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

是否可以不使用 FormData 来做到这一点？也就是说，模拟FormData的工作？基本上，我试图了解 FormData api 所做的额外工作。也许使用 axios 是不可能的，我应该使用普通的 XMLHttpRequest 来做到这一点。

当然，简单地发送文件对象是行不通的：

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

在服务器端，头像对象将为空。我可以发送像 avatar.name 这样的元数据，但不能发送整个对象。

【问题讨论】：

标签： javascript ajax axios multipartform-data

【解决方案1】：

是的，可以在客户端手动进行编码。如果您真的想了解有关表单如何工作的每一个小细节，自己编写一个表单数据编码器可能会很有用。但是，对于大多数应用程序，我不推荐它。 FormData API 应该在生产环境中使用。

您需要参考RFC 7578 了解如何实现编码器。

本规范定义了 multipart/form-data 媒体类型，它可以被多种应用程序使用，并由多种协议传输，作为返回一组值作为用户填写结果的一种方式一个表格。

更多资源：

【讨论】：

我发布了一个很大的嵌套 json 有效负载，其中一个是文件。这意味着我需要为每个字段手动创建表单数据对象？
不，您很可能只需要一个 FormData 实例。然后，您需要使用formData.append() 方法决定将哪些字段放入该对象中。我建议为文件设置一个字段，为 JSON 设置第二个字段，我认为这是文件的元数据。