WordPress REST API上传文件

2020-12-26

WordPress媒体库操作可通过media接口实现，上传文件需要用户认证。

上传入口

<input type="file" id="custom-upload-file" onChange={onChange}/>

监听文件输入变化

const onChange = (e) => {
    const file = e.target.files[0];
    var fileData = new FormData();
    fileData.append( 'file', file);

    // WordPress会根据file自动解析属性
    // 可自定义覆盖默认值
    // imageData.append( 'title', 'hello world' );
    // ...

    upload(fileData);
}

上传文件

const upload = (data) => {
	// REST API地址
	const reqUrl = 'https://xxxxx.com/wp-json/wp/v2/media';

	// 认证凭据，此处使用jwt
	const sessionKey = '....';
	const headers = {
        'Authorization': 'Bearer' + sessionKey,
	}

	// 发起请求
    axios.post(reqUrl, data, {
        headers: headers
    })
    .then(function(response) {
        console.log('success', response);
    })
    .catch(function(error) {
        console.error('fail', error);
    });
}

相关资料

  1. REST API 认证：jwt-authentication
  2. 易用、简洁且高效的http库：axios
  3. WordPress REST API Media文档：media
技术