兰空图床对接超星学习通网盘 (支持多用户绑定)

对接到的图床为 LHL's Images

开发思路

先是在项目Misaka-1314/Chaoxing-MiniProgram的文档中看到了超星图床，觉得还挺好用，于是还是按照之前的一篇文章“图床外显为 Webdav 管理”的思路进行Webdav外显。

注意到该项目中有些超星网盘的API(/docs/edge-functions/api/chaoxing/pan.js)以及上传图片的逻辑(/docs/.vitepress/components/ImageUpload.vue)，上传图片的逻辑已经搞定了。而由于国内网盘如果出现违规内容，则可能会封号，故现在只需考虑如何实现每个兰空图床用户绑定自己的超星账号。

兰空图床对文件的命名支持魔法变量，其中涉及到用户的有{uid}，那么干脆指定文件名为{uid}-{md5}，这样既可以让Webdav端判断上传用户，又能避免文件名重复。建表

CREATE TABLE IF NOT EXISTS users (
    id               INTEGER PRIMARY KEY AUTOINCREMENT,
    username         TEXT UNIQUE NOT NULL,
    password_hash    TEXT NOT NULL,
    token            TEXT UNIQUE,
    lsky_uid         INTEGER,
    cx_username      TEXT,
    cx_password_hash TEXT,
    cx_pan_token     TEXT,
    cx_puid          TEXT,
    cx_token_expires TEXT,
    created_at       TEXT NOT NULL
);

CREATE TABLE IF NOT EXISTS images (
    id            INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id       INTEGER NOT NULL REFERENCES users(id),
    filename      TEXT NOT NULL,
    original_name TEXT NOT NULL,
    md5           TEXT NOT NULL,
    size          INTEGER NOT NULL,
    url           TEXT NOT NULL,
    object_id     TEXT,
    mime_type     TEXT,
    uploaded_at   TEXT NOT NULL
);

上传时逻辑：上传图片->判断UID是否绑定了超星账号->尝试上传到指定超星账号->上传成功

以上步骤只要有一个为“否”，则会返回400

用户绑定面板：https://chaoxing.img.lhl.one

现在还需要解决兰空图床前台显示问题，如果直接在储存策略输出a标签则会转义输出导致无法输出超链接来提醒用户绑定超星账号，添加js脚本来解决这个问题

  function fixEscapedHTML() {
    document.querySelectorAll('span').forEach(el => {
      if (el.innerHTML.includes('<a') && el.innerHTML.includes('</a>')) {
        el.innerHTML = el.innerHTML
          .replace(/&lt;a\s+href="([^"]+)"\s+targ?at="_blank"&gt;/gi, '<a href="$1" target="_blank">')
          .replace(/&lt;\/a&gt;/gi, '</a>');
      }
    });
  }

还有一个问题，由于超星网盘开了防盗链，故需要在/user/photos 页面路由注册"no-referer" (这里参考之前的文章Lsky二次开发记录)

RouteDOM.register({
  route: '/user/photos',

  onEnter() {
    const existingMeta = document.querySelector('meta[name="referrer"]');
    if (existingMeta) return true;

    const meta = document.createElement('meta');
    meta.name = 'referrer';
    meta.content = 'no-referrer';
    meta.dataset.route = 'photos';

    document.head.insertBefore(meta, document.head.firstChild);

    return true;
  },

  onLeave() {
    const meta = document.querySelector('meta[name="referrer"][data-route="photos"]');
    if (meta) meta.remove();
  }
});

防盗链处理

如果在全站使用，则直接添加no-referrer即可

<meta name="referrer" content="no-referrer">

如果是单个页面使用，或者不方便修改源代码而需要外挂JS脚本，则可使用JS添加no-referrer

//示例代码，请按照实际需求写
(function () {
    if (!document.head) return false;

    const existingMeta = document.querySelector('meta[name="referrer"]');
    if (existingMeta) return true;

    const meta = document.createElement('meta');
    meta.name = 'referrer';
    meta.content = 'no-referrer';
    meta.dataset.route = 'photos';

    document.head.prepend(meta);

    return true;
})();

图床测试

（本页面已经添加了no-referrer,否则图片无法显示）

采用 CC BY-NC-SA 4.0 协议授权，转载请注明来源。