WordPress如何用rest api上传图片（只要一个html的input就可以上传图片并调用）

Published

2023-03-04

浏览次数 : 388

国内最新原创唯一教程，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;
}

Sign In