WordPress如何用rest api上传图片(只要一个html的input就可以上传图片并调用)
2023-03-04
浏览次数 : 385
国内最新原创唯一教程,rest api上传图片教程
WordPress的rest api十分强大,自带了所有功能区的路由。所有自带默认路由的总路由/wp-json/wp/v2/,推荐大家安装谷歌浏览器的插件json formatter, 就可以直观看到所有路由。 上传到媒体库的路由是wp-json/wp/v2/media。
首先是html
我们首先在需要上传头像的地方创建上传的表单,在后台前台都可以。如果想要实现会员中心的功能,那你必须在author.php这个模板里修改,没有这个文件就新建一个author.php文件,这样所有会员的前台查看页面都变成了这个模板执行。
我们先创建html表单:这部分需要你们自自定义,我这里是创建在atuhor.php里面,所以需要获取当前用户的信息,展现在input 的value里面。
<form id="user-profile" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="user-name" name="user-name" placeholder="Enter your name" value="<?php echo $current_user->display_name; ?>">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="user-email" name="user-email" placeholder="Enter your email address" value="<?php echo $current_user->user_email; ?>">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="user-description" id="user-description" cols="30" rows="10"><?php echo $user_description; ?>
</textarea>
</div>
<div class="form-group">
<label for="file">头像</label>
<input type="file" id="user-avartar" name="user-avatar" accept="image/*">
<div id="upload-alert"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
可以看到,我创建了一个Input type为file的字段,并添加了id和name值。接下来,我们可以利用这个字段来实现图片上传。(我这里是自定义头像的上传)
我们首先添加一个event, 实现当这个input为file的字段状态更改,也就是选择了图片之后,发送请求:
//先选择这个input字段,也可以直接选择id
var inputFile = $('input[type="file"]');
//用change的event实现
inputFile.change(function() {
var formData = new FormData();
formData.append('file', inputFile[0].files[0]);
$("#upload-alert").html("<p>上传中...</p>");
//任何内置的默认的 接口post 方式都是内置的验证的方式,都必须登陆
//processData和contentType设置的意思就是不要让ajax处理任何我们提交的文件
$.ajax({
url:'https://xmdn.net/wp-json/wp/v2/media',
method:'post',
beforeSend:xhr => {
xhr.setRequestHeader('X-WP-Nonce',hastart.nonce_1);
},
data:formData,
processData:false,
contentType:false,
success: res => {
console.log(res);
//成功上传之后发送请求到custom rest route , 自定义头像的断点
const uploadedAvatar = res.media_details.sizes;
const avartarImg = $('#user-avartar')[0].files[0];
//已经上传图片到media了,发送请求到custom profile endpoint
$.ajax({
url:'https://www.xmdn.net/wp-json/harest/v1/profile',
method:'POST',
beforeSend: xhr => {
xhr.setRequestHeader('Authorization',`Basic ${encodedCredentials}`);
},
data:{
image_src:uploadedAvatar.full.source_url,
user_id:hastart.user_id
},
success:res => {
console.log(res);
$("#upload-alert").html("<p>成功上传到服务器<span><i style='color:green' class='fa fa-check' aria-hidden='true'></i></span></p>");
console.log('success change the avatar of current user'); }} ); },
error: err => {
$("#upload-alert").html("<p style='color:red'>上传失败,没有权限</p>");
}
});
});
上面的代码里,我们先初始化表格的万能对象
var formData = new FormData();
然后表格对象里添加file这个变量:
formData.append('file', inputFile[0].files[0]);
当选中文件后,更改文件传输框下面的提示:你需要在input file下面创建一个div##upload-alert。
$("#upload-alert").html("<p>上传中...</p>");
然后开始发送post请求到media的路由。
任何wp库里面默认的路由都是自带nonce或者application password验证的。
所以在发送时候一定要加上下面的nonce或者是authorazation, 用authoraization话要Base64加密传输的application word.
beforeSend:xhr => {
xhr.setRequestHeader('X-WP-Nonce',hastart.nonce_1);
},
//base64 加密传输application password
const username = 'admin';
const password = "";
const credentials = `${username}:${password}`;
const encodedCredentials = btoa(credentials);
beforeSend: xhr => {
xhr.setRequestHeader('Authorization',`Basic ${encodedCredentials}`);
},
data里面设置的是空的formData,也就是说,上传的时候,只有上面添加到formData里面的file的值。
执行之后他就会返回一个上传媒体对象的值。
如何让上传的图片替换为头像
如何让上传的图片变成头像,你就要用到自定义路由,来返回你想要的结果。
创建自定义路由的代码:
add_action( 'rest_api_init', 'ha_api_custom_route' );
function ha_api_custom_route() {
register_rest_route('harest/v1','/profile',[
'methods' => 'POST',
'callback' => 'upload_image_profile',
'permission_callback' => '__return_true',
]);
}
回调函数:
function upload_image_profile($request) {
$image_src = $request->get_param(‘image_src’);
$user_id = $request->get_param(‘user_id’);
//check user exist
$user = get_user_by(‘id’,$user_id);
if (empty($user)) {
return new WP_Error(‘ERROR’,’user does not exists’,array(‘status’ => 400));
}
if (empty($image_src)) {
return new WP_Error(‘ERROR’,’image src is empty’,array(‘status’ => 400));
}
$user_id = $user->ID;
//update user meta
update_user_meta( $user_id, ‘ha_profile_image’, $image_src );
//return
return new WP_REST_Response(array(‘status’ => ‘success’,’user_id’ => $user_id,’image_src’ => $image_src,’message’ => ‘Image updated’),200);
}
这个回调函数执行了update_user_meta的操作,就能成功实现用户头像的更新。
当然要实现用户头像的更新,最主要要添加这个函数:
add_filter( 'pre_get_avatar', 'ha_pre_get_avatar',10,2 );
function ha_pre_get_avatar($avatar,$id_or_email) {
//check email or id
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user_id = (int) $id_or_email;
$user = get_user_by( 'id', $user_id );
} elseif ( is_object( $id_or_email ) ) {
if ( ! empty( $id_or_email->user_id ) ) {
$user_id = (int) $id_or_email->user_id;
$user = get_user_by( 'id', $user_id );
}
} else {
$user = get_user_by( 'email', $id_or_email );
$user_id = $user->ID;
}
if (!empty($user_id)) {
if (!empty(get_user_meta($user_id,'ha_profile_image',true))) {
$profile_image = get_user_meta($user_id,'ha_profile_image',true);
$avatar = "<img src='$profile_image' class='avatar avatar-96 photo' height='96' width='96' alt='profile image'>";
}
}
//check the user meta
return $avatar;
}