说明

此方法只和UniCloud前段交互,后端可查看白嫖uniCloud储存当图床


UniCloud好像支持鉴黄功能,具体我没测试。

使用方法

新增独立页面-复制代码-保存
如果你想修改成自己的接口做以下这些步骤。

  1. 找到index.php文件修改,url: "api.php" ,url: "//你的域名/api.php"即可,共三处。
  2. 替换文中
<script src="https://test.coldyun.cn/unicloud/layui/chuan.js"></script>


6284b8b1d8497.jpg

图床代码

!!!
<head>
<link rel="stylesheet" href="//test.coldyun.cn/unicloud/layui/css/style.css?v=2">
<link rel="stylesheet" href="//test.coldyun.cn/unicloud/layui/css/layui.min.css">
</head>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
  <legend>uniCloud图床上传</legend>
</fieldset>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin: 0 25px;">
  <span class="layui-badge-dot"></span> 文件格式支持:jpg,jpeg,png,gif<br>
</blockquote>
<div class="Teacher-up">
    <div class="layui-progress layui-progress-big" lay-filter="demo" style="margin-bottom: 20px;" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
    <div class="layui-upload-drag" id="multiple">
        <i class="layui-icon"></i>
        <p>点击或者拖拽图片到此处上传</p>
    </div>
    <div style="display:none"><input type="button" id="uploadBtn"></div>

    <div class="layui-row">
        <div class="layui-col-lg12" id="imgshow" style="display:none;">
            <!-- 图片显示区域 -->
            <!-- 显示缩略图 -->
            <div class="layui-col-lg4">
                <div id="img-thumb"><a href="" target="_blank" title="点此查看原图"><img alt="loading"></a></div>
            </div>
            <!-- 显示地址 -->
            <div class="layui-col-lg7 layui-col-md-offset1">
                <div id="links">
                    <table class="layui-table" lay-size="sm" lay-skin="nob">
                        <tbody>
                        <tr>
                            <td>URL</td>
                            <td><input type="text" class="layui-input" id="url"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm copy-btn" onclick="copyurl('url')">复制</a></td>
                        </tr>
                        <tr>
                            <td>HTML</td>
                            <td><input type="text" class="layui-input" id="html"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm copy-btn" onclick="copyurl('html')">复制</a></td>
                        </tr>
                        <tr>
                            <td>Markdown</td>
                            <td><input type="text" class="layui-input" id="markdown"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm copy-btn" onclick="copyurl('markdown')">复制</a></td>
                        </tr>
                        <tr>
                            <td>BBCode</td>
                            <td><input type="text" class="layui-input" id="bbcode"></td>
                            <td><a href="javascript:;" class="layui-btn layui-btn-sm copy-btn" onclick="copyurl('bbcode')">复制</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 图片显示区域END -->
        </div>
    </div>

</div>
<script src="//cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://test.coldyun.cn/unicloud/layui/layui.js"></script>
<script src="//cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://test.coldyun.cn/unicloud/layui/chuan.js"></script>
!!!

示例图

6284b8c87aa6a.jpg

文章至结束
本文作者:
文章标题:为你的博客添加图床功能
本文地址:https://coldyun.cn/archives/78.html
版权说明:若无注明,本文皆Cold' Blog原创,转载请保留文章出处。