zblog 后台挂载第三方图床api上传按钮+完整代码配置

2023-03-07
291次阅读
没有评论

用的版本是 lskypro 1.6 版本,修改过的api参数,headers 中携带 token ,而不是原本的直接请求token。

token 换账号获取或者进入 mysql 数据库之后查看 users 表格获取。

先看一下我的网站后台截图。

zblog 后台挂载第三方图床api上传按钮+完整代码配置

之后填写到代码中就行,需要注意的是 zblog 后台有 csf 验证权限,这边我的做法是直接用 php 写了一个中转功能,后台js直接提交到本地的 php 文件,本地文件直接转到第三方的 api 获取地址后返回给前端自己去处理。

后台的代码如下:

挂载代码:

// 	自己添加的
	if($zbp->Config('justblog')->tuchuangoff){
	    Add_Filter_Plugin('Filter_Plugin_Edit_Response3','justblog_3upload');
	}

主要的:

// 插入图片api
function justblog_3upload() {
    global $zbp,$article;
    
    // html 和 css
	echo '<span><style>#up_to_chevereto {display: none!important;}#up_img_label {color:#fff!important;background-color: #16a085!important;border-radius: 5px!important;padding: 7px!important;height: 35px;width: 70px;}</style>
                    <input id="up_to_chevereto" class="ssss" type="file" accept="image/*" multiple="multiple"/><label for="up_to_chevereto" id="up_img_label"><i class="fa fa-picture-o" aria-hidden="true"></i> 上传到图床</label>
                    </span>';


    echo '
    <script>
     	$(".ssss").change(function() {
             			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", "'.$zbp->Config('justblog')->lankongyoken.'");
 						var res;
 						$.ajax({
 							async: true,
 							crossDomain: true,
 							url: "'.$zbp->Config('justblog')->dsf_api.'",
 							type: "POST",
 							processData: false,
 							contentType: false,
 							data: formData,
';
echo <<<AKK

 							beforeSend: function(xhr) {
 								$('#up_img_label')
 									.html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> 正在上传 …');
 							},
 							success: function(res) {
 							 res = JSON.parse(res);
 								$("#up_img_label")
 									.html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功 ♥');
 								var foxxx = document.getElementById("edtTitle").value;
 								var valusae = '<a href="'+res.data.url+'"><img class="aligncenter" src="'+res.data.url+'" alt="'+foxxx+'"></a>';
 								UE.getEditor('editor_content').execCommand('insertHtml', valusae);
 							},
 							error: function() {
 								$("#up_img_label")
 									.html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败 ★');
 							}
AKK;

echo '
 						});
       
 					}
        });
    </script>';
}

php 文件代码:

<?php

$file = $_FILES['file'];
$token =$_REQUEST['token'];
$tmp = $_FILES['file']['tmp_name'];
$filend = '1.png';
move_uploaded_file($tmp, $filend);

$url = "https://pic.slhq.cn/api/upload";

$data = [
    "file" => new\ CURLFile($filend),
    //   "file"=>  "@".str_replace("\\","/",realpath($filend)),
    "token" => $token //授权token
];

//post请求
$res = post($url, $data);
// 删除本地该图片
unlink($filend);#
// 返回图片链接
// 已有格式,这边直接返回交给前端处理
die($res);


/**
 * 发起POST请求
 */
function post($url, $msg) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $msg);
    curl_setopt($curl, CURLOPT_HTTPHEADER, ['Content-Type:multipart/form-data']);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
}

在 zblog 的网站下新建一个 php 文件,填写进去上面代码。

搭配好我们的 lsky pro 就行了, 至于存放到哪里,可以直接对接到 ftp 空间,不建议使用 存储桶,因为太贵。

可以买6块钱一个月的ftp 空间,600M大小,前面够用了,后面不够可以再升级。

找不到合适的我这边推荐一个,我自己就在用,雨云:https://www.rainyun.cc/  这个 ftp 空间的速度很快,我比较推荐。

注册一个账号充值6块钱就行,走我上面的链接,注册就送5块钱代金券,也就是第一个月只需要 1 块钱。

好了,广告打完了,咱们继续。

效果非常好。至于为什么要这么做?

因为我个人非常喜欢将图片和网站数据分开,搬家也很方便。

还有一点,网站程序可以直接丢在某个虚拟主机里面,图片也可以随便丢。

网站和图片不是同一个服务器,不会影响服务器的速度。比如你的网站流量很大,图片加载太多导致你的用户体验很差,用户来几次就不来了。

这就是为什么我推崇这个干的原因,原理和我们把图片放在 存储桶 是一样的,就是为了分割开。

好了,最后,有需要这么干的,但不会的,欢迎联系我,我帮你搞定,收费几十块钱,而且还给你一个我改过的 lskypro程序。联系方式本站 about 联系页面。

注意:你的编辑器必须换成 UE 编辑器,因为我代码返回就是按照 Ue 编辑器格式返回的,也就是百度编辑器。

正文结束
居烽
版权声明:本站原创文章,由 居烽 于2023-03-07发表,共计3201字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码