boxmoe_header_banner_img

Hello! 欢迎来到盒子萌!

加载中

文章导读

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


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

很多人喜欢把图片放在图床上,可以有自建的,或者是第三方图床的,只要图床有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日
哇,好喜欢这个,刚好用到 :roll:
评论头像
结花 2021年03月25日
蟹蟹分享鸭!
评论头像
UP木木 2021年04月04日
可以可以,正缺这个
评论头像
Arcitcgn 2021年08月17日
你好,请问这个代码添加到哪里呢?
评论头像
专收爆米花 博主 2021年08月24日
functions
评论头像
zapro 2021年09月10日
新浪微博的的图床要怎么弄啊
评论头像
专收爆米花 博主 2021年09月10日
没研究过新浪的
评论头像
猫叔 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日
我想知道这个代码怎么对接美团那个图床啊

发表评论

表情 颜文字
插入代码