前言

由于一直使用 GitHub + jsdelivr 的免费图床，自从去年 jsdelivr 挂了之后，博客的图片就无法加载了，所以只好自己搭建图床。

经过一段时间的折腾，我在自己组装的 all in one 服务器上搭建了兰空图床，并利用兰空 Pro 插件实现了粘贴上传到图床并直接插入文章的功能。

然而，兰空图床免费版的 token 需要使用第三方请求来获取，非常不方便。因此，我在后台程序中添加了一个 POST 请求，使用异步请求来获取 token。

实现效果

实现教程

添加代码

在 /resources/views/common/api.blade.php 文件中合适的位置添加以下代码：

<div>
    <p class="text-lg text-gray-700 font-semibold">Token 获取</p>
    <script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <form id="token" action="{{ request()->getSchemeAndHttpHost() }}/api/v1/tokens" method="POST">
        <div class="my-2 text-sm">
            <div class="form-group qqlogin" style="display: none;">
                <div class="input-group-addon">邮箱</div>
                <input type="email" id="email" name="email" value="{{ Auth::user()->email }}">
            </div>
            <div style="display: inline-flex;position: relative;">
                <div class="px-4 py-3 text-right sm:px-6" style="color: #555;background-color: #eee;border: 1px solid #ccc;">密码</div>
                <input type="password" id="password" name="password" placeholder="输入你的密码">
                <a href="javascript:;" class="button px-4 py-3 sm:px-6" style="color: #fff;background-color: #8abcd1;border-color: #d0dfe6;margin-left:10px;">
                    <div>点击获取</div>
                </a>
            </div>
            <div class="list-group">
                <x-code>
                    <span style="color:tomato;user-select: none;">token：</span><span id="tokenCode"></span>
                </x-code>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function() {
            $("#token .button").click(function() {
                var url = $("#token").attr("action");
                var email = $("#email").val();
                var password = $("#password").val();
                $.ajax({
                    type: 'post',
                    url: url,
                    data: {
                        email: email,
                        password: password
                    },
                    success: function(data) {
                        if (data.status == true) {
                            $("#tokenCode").html('Bearer ' + data.data.token)
                        } else {
                            if (data.message == "password 不能为空。") {
                                $("#tokenCode").html("密码不能为空！")
                            } else if (data.message == "The email address or password is incorrect.") {
                                $("#tokenCode").html("请确认密码是否正确！")
                            }
                        }
                    },
                    error: function() {
                        $("#tokenCode").html("请求过于频繁，请稍后再试！")
                    }
                });

            });
        });
    </script>
</div>

添加位置

刷新后台

建议使用强制刷新 Ctrl+F5。

结语

其实实现原理很简单，就是使用 jQuery 的 Ajax 来获取 token。

之前看到有人搭建了一个专门用来获取兰空图床 token 的程序，我觉得太麻烦了，所以才有了这个简便的想法。

最佳标题：

如何使用 Ajax 实现兰空图床的 Token 获取

标签：

• 兰空图床
• Token 获取
• Ajax
• jQuery
• 图床搭建