给wordpress添加一个独立上传图片的功能

以前我写过使用第三方图床的api来实现。

wordpress后台添加按钮并上传图片到自建图床

3年前 (2021-06-12) 0

今天换了个想法，因为网站放在国内虚拟主机就需要重新买一个空间放置图床，然后又是一番急躁的修改配置。

我检查了一下我博客的图片，大概也就不到50M的图片，所以完全没有必要单独弄一个图床对接过去。

所以我考虑的是后台熟悉的界面不改变，直接对接到本地指定的文件夹。

别问我为什么不使用wordpress自带的图片（媒体）上传图片，问就是不喜欢，难用的要死。

有这个文件，以后自己弄一个接口，后面随时找个空间把php丢上去就能存储图片了，主要是方便易于管理。

一共两个代码：

后台对接的js代码：

$("#up_to_chevereto").change(function() {
  window.wpActiveEditor = null;
  for (var i = 0; i < this.files.length; i++) {
    var f=this.files[i];
    var formData=new FormData();
    formData.append('file',f);
    formData.append('token', '这是带过去的token，没啥用，可以自己定义一个验证，可以多带几个，接口暴露也不怕别人恶意上传');
    var res;
    $.ajax({
        async:true,
        crossDomain:true,
        url:'https://你的网址/uploadimages.php',
        type : 'POST',
        processData : false,
        contentType : false,
        data:formData,

        beforeSend: function (xhr) {
            $('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
        },
        success:function(res){
        var dataz = JSON.parse(res);
        // console.log(res[]); 
            wp.media.editor.insert('<a href='+dataz['data']['url']+'><img class="aligncenter" src='+dataz['data']['url']+'></img></a>');
            $("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功，继续上传');
            
        },
        error: function (){
            $("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
        }
    });
  }
});

接收方的php代码：

<?php
// 检查是否有文件上传
// print(json_encode($_FILES));
$referrer = $_SERVER['HTTP_REFERER'];
 $domain = parse_url($referrer, PHP_URL_HOST);

if(isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // 文件存储目录，确保目录存在，这里假设为 uploads/
    $uploadDir = 'uploads/';

    // 获取文件扩展名
    $fileExtension = pathinfo($file['name'], PATHINFO_EXTENSION);
    $randomNumber = mt_rand(1000000000, 9999999999);
    // 生成唯一的文件名
    $fileName = md5(uniqid('i_') . '.'.$randomNumber.'.'.time()).'.'. $fileExtension;

    // 拼接文件保存路径
    $uploadPath = $uploadDir . $fileName;

    // 将文件从临时目录移动到指定目录
    if(move_uploaded_file($file['tmp_name'], $uploadPath)) {
        // 返回图片的 URL 地址
        $path = $_SERVER['REQUEST_URI'];
        $newPath = str_replace("uploadimages.php", "", $path);
        // $newPath = substr(strstr($path, "uploadimages.php"), 10);
        $imageUrl = 'https://ssooo.cn' .$newPath. $uploadPath;

$return_array_success = array(
        "code"=>200,
        "msg"=> "success",
        "data"=>array(
            "name"=>$file['name'],
            "url"=> $imageUrl,
            ),
        "time"=> time(),
    );

        echo json_encode($return_array_success,JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
    } else {
        echo json_encode(array('code' =>201, 'message' => '文件上传失败'),JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
    }
} else {
    echo json_encode(array('code' =>201, 'message' => '未找到上传的文件'),JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
}

目前没有考虑到的是，没有做图片对比，后果就是图片可以重复上传，不过自己用的，无所谓了。

wordpress后台添加按钮并上传图片到自建图床

后台对接的js代码：

接收方的php代码：

测试：