Javascript Can';t使用Wordpress媒体Rest API从React上传图像
我正在构建一个React应用程序(使用CreateReact应用程序),我需要使用Wordpress媒体RESTAPI在Wordpress网站上传图像。我正在本地运行react应用程序() 在Wordpress的网站上,我使用了“JWT认证WP-API”插件来简化认证 当我尝试上载图像时,它会给出一个“400-错误请求”响应,其中包含以下详细信息:Javascript Can';t使用Wordpress媒体Rest API从React上传图像,javascript,reactjs,multipartform-data,wordpress-rest-api,Javascript,Reactjs,Multipartform Data,Wordpress Rest Api,我正在构建一个React应用程序(使用CreateReact应用程序),我需要使用Wordpress媒体RESTAPI在Wordpress网站上传图像。我正在本地运行react应用程序() 在Wordpress的网站上,我使用了“JWT认证WP-API”插件来简化认证 当我尝试上载图像时,它会给出一个“400-错误请求”响应,其中包含以下详细信息: {"code":"rest_upload_no_data","message":"No data supplied.","data":{"statu
{"code":"rest_upload_no_data","message":"No data supplied.","data":{"status":400}}
在过去的三天里,我一直在搜索和尝试我找到的所有解决方案。它们都不起作用
我的实施细节:
在wp config中,我完成了中描述的所有更改
WP Server.htaccess
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
#RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Content-Length, Cache-Control, Content-Disposition, Accept"
</IfModule>
# END WordPress
# BEGIN cPanel-generated php ini directives, do not edit
# Manual editing of this file may result in unexpected behavior.
# To make changes to this file, use the cPanel MultiPHP INI Editor (Home >> Software >> MultiPHP INI Editor)
# For more information, read our documentation (https://go.cpanel.net/EA4ModifyINI)
<IfModule php7_module>
php_flag display_errors Off
php_value max_execution_time 30
php_value max_input_time 60
php_value max_input_vars 1000
php_value memory_limit 256M
php_value post_max_size 260M
php_value session.gc_maxlifetime 1440
php_value session.save_path "/var/cpanel/php/sessions/ea-php72"
php_value upload_max_filesize 256M
php_flag zlib.output_compression Off
</IfModule>
<IfModule lsapi_module>
php_flag display_errors Off
php_value max_execution_time 30
php_value max_input_time 60
php_value max_input_vars 1000
php_value memory_limit 256M
php_value post_max_size 260M
php_value session.gc_maxlifetime 1440
php_value session.save_path "/var/cpanel/php/sessions/ea-php72"
php_value upload_max_filesize 256M
php_flag zlib.output_compression Off
</IfModule>
# END cPanel-generated php ini directives, do not edit
我尝试改用Axios,但也遇到了同样的问题。
Wordpress的所有其他请求都正常工作。
提前谢谢你 首先,使用rest客户端(如postman)尝试api,并找出问题是在客户端还是服务器端。这一定是要做的第一步。@KrishnadasPC我也试过了,得到了同样的回答。在我的例子中,我使用了失眠症。首先尝试使用rest客户端(如postman)的api,看看问题出在客户端还是服务器端。这一定是要做的第一步。@KrishnadasPC我也试过了,得到了同样的回答。就我而言,我曾经失眠。
const Test = () => {
const [isUploading, setIsUploading] = useState(false)
const [selectedFile, setSelectedFile] = useState(null)
const blockScreenContext = useContext(BlockScreenUIContext)
const fileUploadHandler = e => {
e.preventDefault();
//setting the data that will parsed with the file
let oDate = new Date();
let wpMediaData = {
title: 'Posted from App',
caption: 'The post caption text'
}
//creating the form data object and appending the extra info for the file
let formData = new FormData();
for (var key in wpMediaData) {
formData.append(key, wpMediaData[key])
}
formData.append('file', selectedFile)
//formData.append('file', document.querySelector('input[type="file"]').files[0])
//defining the base url
let baseUrl = 'https://mywebsite.com/'
//getting the token
let token = 'my token'
let headers = {
Authorization: 'Bearer ' + token,
'Content-Type': 'multipart/form-data; charset=utf-8; boundary=' + Math.random().toString().substr(2),
'Content-Disposition': `form-data; filename="${selectedFile.name}"`,
'Cache-Control': 'no-cache',
}
const options = {
method: 'POST',
body: formData,
headers: headers
}
let url = baseUrl + 'wp-json/wp/v2/media'
fetch( url, options).then(res => {
console.log('response', res)
}).catch(err => {
console.log('error', err)
})
}
const fileSelectedHandler = e => {
//the first element of the target is the file
console.log('o valor obtido com e.target', e.target.files[0])
setSelectedFile(e.target.files[0])
}
return <div>
<form method="POST" encType="multipart/form-data">
<div className="form-group">
<input id="file" name="file" type="file" className="form-control" onChange={fileSelectedHandler} />
</div>
<div className="form-group">
<BSButton
type='submit'
className='btn-primary'
text="Upload"
loadingText="Uploading..."
onClick={fileUploadHandler}
disable={isUploading}
/>
</div>
</form>
</div>
}
Content-Disposition': `attachment; filename=${selectedFile.name}