通过 jQuery 和 WP REST API 以 Ajax 方式上传图片到 WordPress 后台

文 / @WordPress主题

使用WordPressRESTAPI上传图片和文件到媒体库

作为一名小本本,我喜欢用WordPress来写博客和开发主题,在开发过程中,我们经常需要上传图片和文件到WordPress媒体库中。但是,WordPress官方文档并没有介绍上传图片的方式。在开发一个基于React的WordPress主题时,我遇到了这个难题,研究了几个小时,最终找到了上传图片的方法,现在我来分享一下这个方法,供有同样需求的朋友参考。

在这个主题中,有一个表单,需要上传文章的标题、内容、自定义字段和图片作为文章的特色图像。我们使用jQueryAjax的方式来说明如何实现文件上传。为了简化说明,下面的代码中,我们使用了jQuery库。如果您对jQuery不熟悉,建议先学习一下jQuery。

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

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

设置HTML5表单Enctype参数

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

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

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

使用jQueryAjax提交表单数据

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

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

FormData是一个JavaScript对象,我们可以通过这个对象创建一个虚拟的表单提交数据,然后把这个数据发送给服务器,来模拟表单提交操作。我们创建了一个名为imageData的FormData对象,附加文件到imageData对象中。这个对象就是我们通过代码创建的虚拟表单,而在实际的项目中,我们需要获取用户选择上传的文件信息。

  //获取文件对象
  var fileObject=$('#file')[0].files[0];
  //创建一个虚拟的表单,把文件放到这个表单里面
  var imageData=new FormData();
  imageData.append("file",fileObject);

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

如果我们直接提交文件给RESTAPI,API会报错。我们还需要设置一个 Content-DispositionHTTP头,让API知道我们传输的数据是一个文件。

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

上面的代码中,我们设置了上传的文件名为“test.jpg”,而在实际的项目中,我们需要获取用户选择上传的文件名。如果我们需要设置的不是特色图像,也可以把图片设置为文章的自定义字段。除了开发WordPress主题,我们还可以通过RESTAPI接口开发一个手机APP或桌面应用来让用户上传提交文件。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。