在使用 WordPress REST API 开发应用程序的时候，我们需要上传图片和文件到 WordPress 媒体库中，而 WordPress 官方文档没有介绍上传图片的方式。我们开发一个基于 React 的WordPress主题时，就遇到了这个难题，研究了几个小时，我们才找到上传图片的方法，在这里分享出来，供有同样需求的朋友参考。在这个主题中，有一个表单，除了需要上传文章的标题，内容、还需要上传自定义字段和图片作为文章的特色图像。React 实现这个流程的代码量比较大，为了简化说明代码，我们使用 jQuery Ajax 的方式来说明。

上传图片文件使用的 WP-API 接口

WordPress REST API (WP-API) 有一个 ‘/media’ 的端点，我们只需要发送合适的数据到这个端点就可以了，而需要发送什么格式的数据到这个端点才能实现图片上传，WordPress 的 REST API 里面并没有提到，我们就是卡在这个数据格式上，花了很多时间才尝试成功。

设置 HTML5 表单 Enctype 参数

首先我们需要让表单知道，我们需要上传文件，给表单设置一个 enctype=”multipart/form-data” 的属性就可以了。

<form id="imageUpload" enctype="multipart/form-data"> 
    <input type="file" id="file" />
    <input type="submit" value="save file" />
</form>

Enctype 参数，默认为 “text/plain”，如果我们需要上传图片，一定要设置这个参数为 “multipart/form-data”，否则在第一步就不能实现图片上传。

使用 jQuery Ajax 提交表单数据

接下来，我们需要使用 jQuery 的 Ajax 方法来提交数据到 WordPress REST API，在这里需要注意的是，我们需要添加 X-WP-Nonce 信息来实现 WordPress REST API 认证，认证方法我们可以采取基 Cookie 认证或者应用程序密码认证方式。

创建 FormData() 对象模拟一个表单

FormData 是一个 JavaScript 对象，我们可以通过这个对象创建一个虚拟的表单提交数据，然后把这个数据发送给服务器，来模拟表单提交操作，下面的操作中，我们创建了一个名为 imageData 的 FormData 对象，然后附加文件到 imageData 对象中，这个对象和我们点击提交按钮提交表单时发送到服务器的表单数据是一个意思。只不过这个是我们通过代码创建的。

// 获取文件对象
var fileObject = $('input#file')[0].files[0] // 或者使用原生方法获取文件 document.getElementById("photo").files[0];
var filename = fileObject.name;

// 创建一个虚拟的表单，把文件放到这个表单里面
var imageData = new FormData();
imageData.append( "file", fileObject);

设置合适的 HTTP 头才能正确提交数据

完成了上一步，如果我们直接提交文件给 REST API，API 还是会报错，因为 API 默认会认为我们提交的内容是文本。我们还需要设置一个 Content-Disposition HTTP 头，让 API 知道我们传输的数据是一个文件。

$.ajax({
    url: ajaxInfo.json_url + 'media?X-WP-Nonce' + ajaxInfo.nonce,
    type: 'POST',
    data: imageData, //这个是上一步，创建的对象
    cache: false,
    contentType: false,
    processData: false,
    headers: { 'Content-Disposition': 'attachment;filename=test.jpg' },
    success: succes(res) // 上传成功后，我们可以获取附件 ID，作为文章的附件（featured_media）和文章一起提交，来实现设置文章特色图像的目的
});

上面的代码中，我们设置了上传的文件名为 “test.jpg”, 而在实际的项目中，我们需要获取用户选择上传的文件名。

上传成功后，REST API 会返回我们创建成功的文件的对象，我们可以获取上传的附件 ID，然后在接下来的处理中，把这个 ID 作为文章的特色图片（REST API 接口中的参数为 featured_media）提交到文章的 API，把上传的图片设置为文章的特色图像。如果我们需要设置的不是特色图像，也可以把图片设置为文章的自定义字段。除了开发WordPress主题，我们还可以通过 REST API 接口开发一个手机 APP 或桌面应用来让用户上传提交文件。