boxmoe_header_banner_img

Hello! 欢迎来到盒子萌!

加载中

文章导读

wordpress编辑器添加上传到图床功能


avatar
专收爆米花 2021年3月1日 9.11k

很多人喜欢把图片放在图床上,可以有自建的,或者是第三方图床的,只要图床有api接口都基本能实现对接,具体自己参考
api说明,boxmoe发布的这段代码是比较适合市场绝大部图床的api,只要修改一下 api的posturl post参数和返回参数

//添加图床上传按钮
add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
    echo '<input id="boxmoe_up_img" type="file" accept="image/*" multiple="multiple"/>
          <label for="boxmoe_up_img" id="up_img_label" class="button"> 上传图片到图床</label>
          ';
?>
<style type="text/css">
#boxmoe_up_img {display: none;}
#up_img_label:before {font-family: dashicons;content: "\f128";}
</style>
<script type="text/javascript">
jQuery('#boxmoe_up_img').change(function() {
  window.wpActiveEditor = null;
  for (var i = 0; i < this.files.length; i++) {
    var f=this.files[i];
	if (!/image\/\w+/.test(f.type)) {
            alert('请选择图片文件(png | jpg | gif)');
            return
        }
    var formData=new FormData();
    formData.append('pic',f);  //boxmoe提示:这里的pic就是api的post参数要修改的地方
    jQuery.ajax({
        async:true,
        crossDomain:true,
        url:'https://api.jsmoe.com/upimg/up.php',  //boxmoe提示:这里就是api的地址,也就是上传接口
        type : 'POST',
        processData : false,
        contentType : false,
		dataType: 'json',
        data:formData,
        beforeSend: function (xhr) {
            jQuery('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
        },
        success:function(res){
            wp.media.editor.insert('<a href='+ res.data.url +'><img src='+ res.data.url +' ></img></a>'); //boxmoe提示:res.data.url 这里的url就是返回的参数
            jQuery("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功,继续上传');
        },
        error: function (){
            jQuery("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败,重新上传');
        }
    });
  }
});
</script>
<?php
}

如果是自建接口,但是存在跨域问题,则需要在图床上添加主机头

header('Access-Control-Allow-Origin: https://www.boxmoe.com');  //boxmoe提示:域名改成你的博客域名
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');

wordpress编辑器添加上传到图床功能

wordpress编辑器添加上传到图床功能2



评论(16)

查看评论列表
评论头像
kit605 2021年03月02日

哇,好喜欢这个,刚好用到 🙄

评论头像
结花 2021年03月25日

蟹蟹分享鸭!

评论头像
UP木木 2021年04月04日

可以可以,正缺这个

评论头像
Arcitcgn 2021年08月17日

你好,请问这个代码添加到哪里呢?

评论头像
专收爆米花 博主 2021年08月24日

@Arcitcgn functions

评论头像
zapro 2021年09月10日

新浪微博的的图床要怎么弄啊

评论头像
专收爆米花 博主 2021年09月10日

@zapro 没研究过新浪的

评论头像
猫叔 2021年12月16日

@专收爆米花 为啥我上传会返回两张图片地址

评论头像
专收爆米花 博主 2021年12月17日

@猫叔 检查你的接口是不是会返回两个图片

评论头像
老刘啊 2022年03月20日

@猫叔 #boxmoe_up_img’)后面加上一个 .off (“change”) 好像就可以了

评论头像
山野愚人居 2021年11月04日

收藏,自建的图床,试试去,如果可行,就不用先登录图床上传后复制url过来了……

评论头像
流年笔记 2022年07月28日

这个使用imgurl pro的API可以吗?

评论头像
专收爆米花 博主 2022年07月28日

@流年笔记 可以的

评论头像
尼柯旧梦 2025年02月06日

博主你好,我想知道,如果用美团接口的话 这个代码该怎么写

评论头像
专收爆米花 博主 2025年02月15日

@尼柯旧梦 根据美团的接口api去编写

评论头像
尼柯旧梦 2025年02月06日

我想知道这个代码怎么对接美团那个图床啊


发表评论

表情 颜文字
插入代码