Cloudflare R2 的完美搭档：R2 Uploader 使用指南

Published: at 12:29

Cloudflare R2 作为一款出色的对象存储服务，以其慷慨的免费额度和低廉的价格（前提是合理设置数据访问频率，不然就和我一样被账单吓到哭泣）赢得了广泛青睐。然而，其简陋的图形界面却给日常管理带来了诸多不便，如无法直接移动文件、缺乏缩略图预览等功能。为了解决这些痛点，GitHub 上应运而生了 R2 Uploader 项目，它不仅弥补了 R2 的不足，还带来了一系列实用功能：

  1. 大文件上传：突破 R2 dashboard 300MB 的上传限制，R2 Uploader 理论上可支持高达 100GB 的单文件上传。

  2. 图像压缩：针对将 R2 用作 CDN 的用户，内置图像压缩功能显著提升了图片加载速度。

  3. 多数据桶快速切换：支持为不同数据桶设置多个 Worker，并实现它们之间的便捷切换。

  4. 跨设备安全同步：通过 GitHub 登录，实现配置的安全同步。所有数据在传输到数据库前都经过本地 AES 加密处理。

在实际使用过程中，我发现 R2 Uploader 还能与 WebP Cloud 完美配合，进一步增强了其实用性。

Table of contents

Open Table of contents

配置 R2 Uploader Worker

  1. 前往 Cloudflare 控制面板。

  2. 左侧面板上有一个名为 “Workers 和 Pages” 的部分，点击它，进入到「概述」页面，再点击「创建」按钮。

  3. 然后点击「创建 Worker」按钮。

  4. 在名称部分，可以输入喜欢的名称，也可以忽略，直接点击「部署」按钮。

  5. 之后点击「编辑代码」按钮，删除掉代码编辑器中的内容。

  6. 在代码编辑器内，粘贴以下代码（源码可以在这里找到，也可以据此自行构建代码），然后点击「部署」按钮。

点击查看代码 
var te = async (e, t = Object.create(null)) => {
  let { all: s = !1, dot: r = !1 } = t,
    o = (e instanceof S ? e.raw.headers : e.headers).get("Content-Type");
  return (o !== null && o.startsWith("multipart/form-data")) ||
    (o !== null && o.startsWith("application/x-www-form-urlencoded"))
    ? Pe(e, { all: s, dot: r })
    : {};
};
async function Pe(e, t) {
  let s = await e.formData();
  return s ? Ae(s, t) : {};
}
function Ae(e, t) {
  let s = Object.create(null);
  return (
    e.forEach((r, n) => {
      t.all || n.endsWith("[]") ? He(s, n, r) : (s[n] = r);
    }),
    t.dot &&
      Object.entries(s).forEach(([r, n]) => {
        r.includes(".") && (Te(s, r, n), delete s[r]);
      }),
    s
  );
}
var He = (e, t, s) => {
    e[t] !== void 0
      ? Array.isArray(e[t])
        ? e[t].push(s)
        : (e[t] = [e[t], s])
      : (e[t] = s);
  },
  Te = (e, t, s) => {
    let r = e,
      n = t.split(".");
    n.forEach((o, c) => {
      c === n.length - 1
        ? (r[o] = s)
        : ((!r[o] ||
            typeof r[o] != "object" ||
            Array.isArray(r[o]) ||
            r[o] instanceof File) &&
            (r[o] = Object.create(null)),
          (r = r[o]));
    });
  };
var D = e => {
    let t = e.split("/");
    return t[0] === "" && t.shift(), t;
  },
  re = e => {
    let { groups: t, path: s } = je(e),
      r = D(s);
    return Se(r, t);
  },
  je = e => {
    let t = [];
    return (
      (e = e.replace(/\{[^}]+\}/g, (s, r) => {
        let n = `@${r}`;
        return t.push([n, s]), n;
      })),
      { groups: t, path: e }
    );
  },
  Se = (e, t) => {
    for (let s = t.length - 1; s >= 0; s--) {
      let [r] = t[s];
      for (let n = e.length - 1; n >= 0; n--)
        if (e[n].includes(r)) {
          e[n] = e[n].replace(r, t[s][1]);
          break;
        }
    }
    return e;
  },
  _ = {},
  $ = e => {
    if (e === "*") return "*";
    let t = e.match(/^\:([^\{\}]+)(?:\{(.+)\})?$/);
    return t
      ? (_[e] ||
          (t[2]
            ? (_[e] = [e, t[1], new RegExp("^" + t[2] + "$")])
            : (_[e] = [e, t[1], !0])),
        _[e])
      : null;
  },
  _e = e => {
    try {
      return decodeURI(e);
    } catch {
      return e.replace(/(?:%[0-9A-Fa-f]{2})+/g, t => {
        try {
          return decodeURI(t);
        } catch {
          return t;
        }
      });
    }
  },
  K = e => {
    let t = e.url,
      s = t.indexOf("/", 8),
      r = s;
    for (; r < t.length; r++) {
      let n = t.charCodeAt(r);
      if (n === 37) {
        let o = t.indexOf("?", r),
          c = t.slice(s, o === -1 ? void 0 : o);
        return _e(c.includes("%25") ? c.replace(/%25/g, "%2525") : c);
      } else if (n === 63) break;
    }
    return t.slice(s, r);
  };
var se = e => {
    let t = K(e);
    return t.length > 1 && t[t.length - 1] === "/" ? t.slice(0, -1) : t;
  },
  b = (...e) => {
    let t = "",
      s = !1;
    for (let r of e)
      t[t.length - 1] === "/" && ((t = t.slice(0, -1)), (s = !0)),
        r[0] !== "/" && (r = `/${r}`),
        r === "/" && s ? (t = `${t}/`) : r !== "/" && (t = `${t}${r}`),
        r === "/" && t === "" && (t = "/");
    return t;
  },
  k = e => {
    if (!e.match(/\:.+\?$/)) return null;
    let t = e.split("/"),
      s = [],
      r = "";
    return (
      t.forEach(n => {
        if (n !== "" && !/\:/.test(n)) r += "/" + n;
        else if (/\:/.test(n))
          if (/\?/.test(n)) {
            s.length === 0 && r === "" ? s.push("/") : s.push(r);
            let o = n.replace("?", "");
            (r += "/" + o), s.push(r);
          } else r += "/" + n;
      }),
      s.filter((n, o, c) => c.indexOf(n) === o)
    );
  },
  L = e =>
    /[%+]/.test(e)
      ? (e.indexOf("+") !== -1 && (e = e.replace(/\+/g, " ")),
        /%/.test(e) ? M(e) : e)
      : e,
  ne = (e, t, s) => {
    let r;
    if (!s && t && !/[%+]/.test(t)) {
      let c = e.indexOf(`?${t}`, 8);
      for (c === -1 && (c = e.indexOf(`&${t}`, 8)); c !== -1; ) {
        let a = e.charCodeAt(c + t.length + 1);
        if (a === 61) {
          let i = c + t.length + 2,
            l = e.indexOf("&", i);
          return L(e.slice(i, l === -1 ? void 0 : l));
        } else if (a == 38 || isNaN(a)) return "";
        c = e.indexOf(`&${t}`, c + 1);
      }
      if (((r = /[%+]/.test(e)), !r)) return;
    }
    let n = {};
    r ??= /[%+]/.test(e);
    let o = e.indexOf("?", 8);
    for (; o !== -1; ) {
      let c = e.indexOf("&", o + 1),
        a = e.indexOf("=", o);
      a > c && c !== -1 && (a = -1);
      let i = e.slice(o + 1, a === -1 ? (c === -1 ? void 0 : c) : a);
      if ((r && (i = L(i)), (o = c), i === "")) continue;
      let l;
      a === -1
        ? (l = "")
        : ((l = e.slice(a + 1, c === -1 ? void 0 : c)), r && (l = L(l))),
        s
          ? ((n[i] && Array.isArray(n[i])) || (n[i] = []), n[i].push(l))
          : (n[i] ??= l);
    }
    return t ? n[t] : n;
  },
  oe = ne,
  ie = (e, t) => ne(e, t, !0),
  M = decodeURIComponent;
var S = class {
  raw;
  #r;
  #s;
  routeIndex = 0;
  path;
  bodyCache = {};
  constructor(e, t = "/", s = [[]]) {
    (this.raw = e), (this.path = t), (this.#s = s), (this.#r = {});
  }
  param(e) {
    return e ? this.getDecodedParam(e) : this.getAllDecodedParams();
  }
  getDecodedParam(e) {
    let t = this.#s[0][this.routeIndex][1][e],
      s = this.getParamValue(t);
    return s ? (/\%/.test(s) ? M(s) : s) : void 0;
  }
  getAllDecodedParams() {
    let e = {},
      t = Object.keys(this.#s[0][this.routeIndex][1]);
    for (let s of t) {
      let r = this.getParamValue(this.#s[0][this.routeIndex][1][s]);
      r && typeof r == "string" && (e[s] = /\%/.test(r) ? M(r) : r);
    }
    return e;
  }
  getParamValue(e) {
    return this.#s[1] ? this.#s[1][e] : e;
  }
  query(e) {
    return oe(this.url, e);
  }
  queries(e) {
    return ie(this.url, e);
  }
  header(e) {
    if (e) return this.raw.headers.get(e.toLowerCase()) ?? void 0;
    let t = {};
    return (
      this.raw.headers.forEach((s, r) => {
        t[r] = s;
      }),
      t
    );
  }
  async parseBody(e) {
    return (this.bodyCache.parsedBody ??= await te(this, e));
  }
  cachedBody = e => {
    let { bodyCache: t, raw: s } = this,
      r = t[e];
    if (r) return r;
    let n = Object.keys(t)[0];
    return n
      ? t[n].then(
          o => (n === "json" && (o = JSON.stringify(o)), new Response(o)[e]())
        )
      : (t[e] = s[e]());
  };
  json() {
    return this.cachedBody("json");
  }
  text() {
    return this.cachedBody("text");
  }
  arrayBuffer() {
    return this.cachedBody("arrayBuffer");
  }
  blob() {
    return this.cachedBody("blob");
  }
  formData() {
    return this.cachedBody("formData");
  }
  addValidatedData(e, t) {
    this.#r[e] = t;
  }
  valid(e) {
    return this.#r[e];
  }
  get url() {
    return this.raw.url;
  }
  get method() {
    return this.raw.method;
  }
  get matchedRoutes() {
    return this.#s[0].map(([[, e]]) => e);
  }
  get routePath() {
    return this.#s[0].map(([[, e]]) => e)[this.routeIndex].path;
  }
};
var ae = { Stringify: 1, BeforeStream: 2, Stream: 3 },
  ke = (e, t) => {
    let s = new String(e);
    return (s.isEscaped = !0), (s.callbacks = t), s;
  };
var F = async (e, t, s, r, n) => {
  let o = e.callbacks;
  if (!o?.length) return Promise.resolve(e);
  n ? (n[0] += e) : (n = [e]);
  let c = Promise.all(o.map(a => a({ phase: t, buffer: n, context: r }))).then(
    a =>
      Promise.all(a.filter(Boolean).map(i => F(i, t, !1, r, n))).then(
        () => n[0]
      )
  );
  return s ? ke(await c, o) : c;
};
var Me = "text/plain; charset=UTF-8",
  V = (e, t = {}) => (Object.entries(t).forEach(([s, r]) => e.set(s, r)), e),
  v = class {
    #r;
    #s;
    env = {};
    #a;
    finalized = !1;
    error;
    #c = 200;
    #o;
    #e;
    #t;
    #n;
    #i = !0;
    #u;
    #l;
    #h;
    #d;
    #f;
    constructor(e, t) {
      (this.#r = e),
        t &&
          ((this.#o = t.executionCtx),
          (this.env = t.env),
          (this.#h = t.notFoundHandler),
          (this.#f = t.path),
          (this.#d = t.matchResult));
    }
    get req() {
      return (this.#s ??= new S(this.#r, this.#f, this.#d)), this.#s;
    }
    get event() {
      if (this.#o && "respondWith" in this.#o) return this.#o;
      throw Error("This context has no FetchEvent");
    }
    get executionCtx() {
      if (this.#o) return this.#o;
      throw Error("This context has no ExecutionContext");
    }
    get res() {
      return (
        (this.#i = !1),
        (this.#n ||= new Response("404 Not Found", { status: 404 }))
      );
    }
    set res(e) {
      if (((this.#i = !1), this.#n && e)) {
        this.#n.headers.delete("content-type");
        for (let [t, s] of this.#n.headers.entries())
          if (t === "set-cookie") {
            let r = this.#n.headers.getSetCookie();
            e.headers.delete("set-cookie");
            for (let n of r) e.headers.append("set-cookie", n);
          } else e.headers.set(t, s);
      }
      (this.#n = e), (this.finalized = !0);
    }
    render = (...e) => ((this.#l ??= t => this.html(t)), this.#l(...e));
    setLayout = e => (this.#u = e);
    getLayout = () => this.#u;
    setRenderer = e => {
      this.#l = e;
    };
    header = (e, t, s) => {
      if (t === void 0) {
        this.#e
          ? this.#e.delete(e)
          : this.#t && delete this.#t[e.toLocaleLowerCase()],
          this.finalized && this.res.headers.delete(e);
        return;
      }
      s?.append
        ? (this.#e ||
            ((this.#i = !1), (this.#e = new Headers(this.#t)), (this.#t = {})),
          this.#e.append(e, t))
        : this.#e
          ? this.#e.set(e, t)
          : ((this.#t ??= {}), (this.#t[e.toLowerCase()] = t)),
        this.finalized &&
          (s?.append
            ? this.res.headers.append(e, t)
            : this.res.headers.set(e, t));
    };
    status = e => {
      (this.#i = !1), (this.#c = e);
    };
    set = (e, t) => {
      (this.#a ??= {}), (this.#a[e] = t);
    };
    get = e => (this.#a ? this.#a[e] : void 0);
    get var() {
      return { ...this.#a };
    }
    newResponse = (e, t, s) => {
      if (this.#i && !s && !t && this.#c === 200)
        return new Response(e, { headers: this.#t });
      if (t && typeof t != "number") {
        let n = new Headers(t.headers);
        this.#e &&
          this.#e.forEach((c, a) => {
            a === "set-cookie" ? n.append(a, c) : n.set(a, c);
          });
        let o = V(n, this.#t);
        return new Response(e, { headers: o, status: t.status ?? this.#c });
      }
      let r = typeof t == "number" ? t : this.#c;
      (this.#t ??= {}),
        (this.#e ??= new Headers()),
        V(this.#e, this.#t),
        this.#n &&
          (this.#n.headers.forEach((n, o) => {
            o === "set-cookie" ? this.#e?.append(o, n) : this.#e?.set(o, n);
          }),
          V(this.#e, this.#t)),
        (s ??= {});
      for (let [n, o] of Object.entries(s))
        if (typeof o == "string") this.#e.set(n, o);
        else {
          this.#e.delete(n);
          for (let c of o) this.#e.append(n, c);
        }
      return new Response(e, { status: r, headers: this.#e });
    };
    body = (e, t, s) =>
      typeof t == "number" ? this.newResponse(e, t, s) : this.newResponse(e, t);
    text = (e, t, s) => {
      if (!this.#t) {
        if (this.#i && !s && !t) return new Response(e);
        this.#t = {};
      }
      return (
        (this.#t["content-type"] = Me),
        typeof t == "number"
          ? this.newResponse(e, t, s)
          : this.newResponse(e, t)
      );
    };
    json = (e, t, s) => {
      let r = JSON.stringify(e);
      return (
        (this.#t ??= {}),
        (this.#t["content-type"] = "application/json; charset=UTF-8"),
        typeof t == "number"
          ? this.newResponse(r, t, s)
          : this.newResponse(r, t)
      );
    };
    html = (e, t, s) => (
      (this.#t ??= {}),
      (this.#t["content-type"] = "text/html; charset=UTF-8"),
      typeof e == "object" &&
      (e instanceof Promise || (e = e.toString()), e instanceof Promise)
        ? e
            .then(r => F(r, ae.Stringify, !1, {}))
            .then(r =>
              typeof t == "number"
                ? this.newResponse(r, t, s)
                : this.newResponse(r, t)
            )
        : typeof t == "number"
          ? this.newResponse(e, t, s)
          : this.newResponse(e, t)
    );
    redirect = (e, t) => (
      (this.#e ??= new Headers()),
      this.#e.set("Location", e),
      this.newResponse(null, t ?? 302)
    );
    notFound = () => ((this.#h ??= () => new Response()), this.#h(this));
  };
var W = (e, t, s) => (r, n) => {
  let o = -1;
  return c(0);
  async function c(a) {
    if (a <= o) throw new Error("next() called multiple times");
    o = a;
    let i,
      l = !1,
      h;
    if (
      (e[a]
        ? ((h = e[a][0][0]), r instanceof v && (r.req.routeIndex = a))
        : (h = (a === e.length && n) || void 0),
      !h)
    )
      r instanceof v && r.finalized === !1 && s && (i = await s(r));
    else
      try {
        i = await h(r, () => c(a + 1));
      } catch (u) {
        if (u instanceof Error && r instanceof v && t)
          (r.error = u), (i = await t(u, r)), (l = !0);
        else throw u;
      }
    return i && (r.finalized === !1 || l) && (r.res = i), r;
  }
};
var d = "ALL",
  ce = "all",
  le = ["get", "post", "put", "delete", "options", "patch"],
  B = "Can not add a route since the matcher is already built.",
  I = class extends Error {};
var Be = Symbol("composedHandler"),
  Ie = e => e.text("404 Not Found", 404),
  he = (e, t) =>
    "getResponse" in e
      ? e.getResponse()
      : (console.error(e), t.text("Internal Server Error", 500)),
  G = class {
    get;
    post;
    put;
    delete;
    options;
    patch;
    all;
    on;
    use;
    router;
    getPath;
    _basePath = "/";
    #r = "/";
    routes = [];
    constructor(e = {}) {
      [...le, ce].forEach(r => {
        this[r] = (n, ...o) => (
          typeof n == "string" ? (this.#r = n) : this.addRoute(r, this.#r, n),
          o.forEach(c => {
            typeof c != "string" && this.addRoute(r, this.#r, c);
          }),
          this
        );
      }),
        (this.on = (r, n, ...o) => {
          for (let c of [n].flat()) {
            this.#r = c;
            for (let a of [r].flat())
              o.map(i => {
                this.addRoute(a.toUpperCase(), this.#r, i);
              });
          }
          return this;
        }),
        (this.use = (r, ...n) => (
          typeof r == "string"
            ? (this.#r = r)
            : ((this.#r = "*"), n.unshift(r)),
          n.forEach(o => {
            this.addRoute(d, this.#r, o);
          }),
          this
        ));
      let s = e.strict ?? !0;
      delete e.strict,
        Object.assign(this, e),
        (this.getPath = s ? (e.getPath ?? K) : se);
    }
    clone() {
      let e = new G({ router: this.router, getPath: this.getPath });
      return (e.routes = this.routes), e;
    }
    notFoundHandler = Ie;
    errorHandler = he;
    route(e, t) {
      let s = this.basePath(e);
      return (
        t.routes.map(r => {
          let n;
          t.errorHandler === he
            ? (n = r.handler)
            : ((n = async (o, c) =>
                (await W([], t.errorHandler)(o, () => r.handler(o, c))).res),
              (n[Be] = r.handler)),
            s.addRoute(r.method, r.path, n);
        }),
        this
      );
    }
    basePath(e) {
      let t = this.clone();
      return (t._basePath = b(this._basePath, e)), t;
    }
    onError = e => ((this.errorHandler = e), this);
    notFound = e => ((this.notFoundHandler = e), this);
    mount(e, t, s) {
      let r, n;
      s &&
        (typeof s == "function"
          ? (n = s)
          : ((n = s.optionHandler), (r = s.replaceRequest)));
      let o = n
        ? a => {
            let i = n(a);
            return Array.isArray(i) ? i : [i];
          }
        : a => {
            let i;
            try {
              i = a.executionCtx;
            } catch {}
            return [a.env, i];
          };
      r ||= (() => {
        let a = b(this._basePath, e),
          i = a === "/" ? 0 : a.length;
        return l => {
          let h = new URL(l.url);
          return (h.pathname = h.pathname.slice(i) || "/"), new Request(h, l);
        };
      })();
      let c = async (a, i) => {
        let l = await t(r(a.req.raw), ...o(a));
        if (l) return l;
        await i();
      };
      return this.addRoute(d, b(e, "*"), c), this;
    }
    addRoute(e, t, s) {
      (e = e.toUpperCase()), (t = b(this._basePath, t));
      let r = { path: t, method: e, handler: s };
      this.router.add(e, t, [s, r]), this.routes.push(r);
    }
    matchRoute(e, t) {
      return this.router.match(e, t);
    }
    handleError(e, t) {
      if (e instanceof Error) return this.errorHandler(e, t);
      throw e;
    }
    dispatch(e, t, s, r) {
      if (r === "HEAD")
        return (async () =>
          new Response(null, await this.dispatch(e, t, s, "GET")))();
      let n = this.getPath(e, { env: s }),
        o = this.matchRoute(r, n),
        c = new v(e, {
          path: n,
          matchResult: o,
          env: s,
          executionCtx: t,
          notFoundHandler: this.notFoundHandler,
        });
      if (o[0].length === 1) {
        let i;
        try {
          i = o[0][0][0][0](c, async () => {
            c.res = await this.notFoundHandler(c);
          });
        } catch (l) {
          return this.handleError(l, c);
        }
        return i instanceof Promise
          ? i
              .then(l => l || (c.finalized ? c.res : this.notFoundHandler(c)))
              .catch(l => this.handleError(l, c))
          : (i ?? this.notFoundHandler(c));
      }
      let a = W(o[0], this.errorHandler, this.notFoundHandler);
      return (async () => {
        try {
          let i = await a(c);
          if (!i.finalized)
            throw new Error(
              "Context is not finalized. Did you forget to return a Response object or `await next()`?"
            );
          return i.res;
        } catch (i) {
          return this.handleError(i, c);
        }
      })();
    }
    fetch = (e, ...t) => this.dispatch(e, t[1], t[0], e.method);
    request = (e, t, s, r) => {
      if (e instanceof Request)
        return t !== void 0 && (e = new Request(e, t)), this.fetch(e, s, r);
      e = e.toString();
      let n = /^https?:\/\//.test(e) ? e : `http://localhost${b("/", e)}`,
        o = new Request(n, t);
      return this.fetch(o, s, r);
    };
    fire = () => {
      addEventListener("fetch", e => {
        e.respondWith(this.dispatch(e.request, e, void 0, e.request.method));
      });
    };
  };
var U = "[^/]+",
  H = ".*",
  T = "(?:|/.*)",
  C = Symbol(),
  Ue = new Set(".\\+*[^]$()");
function qe(e, t) {
  return e.length === 1
    ? t.length === 1
      ? e < t
        ? -1
        : 1
      : -1
    : t.length === 1 || e === H || e === T
      ? 1
      : t === H || t === T
        ? -1
        : e === U
          ? 1
          : t === U
            ? -1
            : e.length === t.length
              ? e < t
                ? -1
                : 1
              : t.length - e.length;
}
var q = class {
  index;
  varIndex;
  children = Object.create(null);
  insert(e, t, s, r, n) {
    if (e.length === 0) {
      if (this.index !== void 0) throw C;
      if (n) return;
      this.index = t;
      return;
    }
    let [o, ...c] = e,
      a =
        o === "*"
          ? c.length === 0
            ? ["", "", H]
            : ["", "", U]
          : o === "/*"
            ? ["", "", T]
            : o.match(/^\:([^\{\}]+)(?:\{(.+)\})?$/),
      i;
    if (a) {
      let l = a[1],
        h = a[2] || U;
      if (
        l &&
        a[2] &&
        ((h = h.replace(/^\((?!\?:)(?=[^)]+\)$)/, "(?:")), /\((?!\?:)/.test(h))
      )
        throw C;
      if (((i = this.children[h]), !i)) {
        if (Object.keys(this.children).some(u => u !== H && u !== T)) throw C;
        if (n) return;
        (i = this.children[h] = new q()),
          l !== "" && (i.varIndex = r.varIndex++);
      }
      !n && l !== "" && s.push([l, i.varIndex]);
    } else if (((i = this.children[o]), !i)) {
      if (
        Object.keys(this.children).some(l => l.length > 1 && l !== H && l !== T)
      )
        throw C;
      if (n) return;
      i = this.children[o] = new q();
    }
    i.insert(c, t, s, r, n);
  }
  buildRegExpStr() {
    let t = Object.keys(this.children)
      .sort(qe)
      .map(s => {
        let r = this.children[s];
        return (
          (typeof r.varIndex == "number"
            ? `(${s})@${r.varIndex}`
            : Ue.has(s)
              ? `\\${s}`
              : s) + r.buildRegExpStr()
        );
      });
    return (
      typeof this.index == "number" && t.unshift(`#${this.index}`),
      t.length === 0 ? "" : t.length === 1 ? t[0] : "(?:" + t.join("|") + ")"
    );
  }
};
var ue = class {
  context = { varIndex: 0 };
  root = new q();
  insert(e, t, s) {
    let r = [],
      n = [];
    for (let c = 0; ; ) {
      let a = !1;
      if (
        ((e = e.replace(/\{[^}]+\}/g, i => {
          let l = `@\\${c}`;
          return (n[c] = [l, i]), c++, (a = !0), l;
        })),
        !a)
      )
        break;
    }
    let o = e.match(/(?::[^\/]+)|(?:\/\*$)|./g) || [];
    for (let c = n.length - 1; c >= 0; c--) {
      let [a] = n[c];
      for (let i = o.length - 1; i >= 0; i--)
        if (o[i].indexOf(a) !== -1) {
          o[i] = o[i].replace(a, n[c][1]);
          break;
        }
    }
    return this.root.insert(o, t, r, this.context, s), r;
  }
  buildRegExp() {
    let e = this.root.buildRegExpStr();
    if (e === "") return [/^$/, [], []];
    let t = 0,
      s = [],
      r = [];
    return (
      (e = e.replace(/#(\d+)|@(\d+)|\.\*\$/g, (n, o, c) =>
        typeof o < "u"
          ? ((s[++t] = Number(o)), "$()")
          : (typeof c < "u" && (r[Number(c)] = ++t), "")
      )),
      [new RegExp(`^${e}`), s, r]
    );
  }
};
var de = [],
  Ne = [/^$/, [], Object.create(null)],
  fe = Object.create(null);
function pe(e) {
  return (fe[e] ??= new RegExp(
    e === "*"
      ? ""
      : `^${e.replace(/\/\*$|([.\\+*[^\]$()])/g, (t, s) => (s ? `\\${s}` : "(?:|/.*)"))}$`
  ));
}
function Le() {
  fe = Object.create(null);
}
function De(e) {
  let t = new ue(),
    s = [];
  if (e.length === 0) return Ne;
  let r = e
      .map(l => [!/\*|\/:/.test(l[0]), ...l])
      .sort(([l, h], [u, p]) => (l ? 1 : u ? -1 : h.length - p.length)),
    n = Object.create(null);
  for (let l = 0, h = -1, u = r.length; l < u; l++) {
    let [p, R, f] = r[l];
    p ? (n[R] = [f.map(([y]) => [y, Object.create(null)]), de]) : h++;
    let m;
    try {
      m = t.insert(R, h, p);
    } catch (y) {
      throw y === C ? new I(R) : y;
    }
    p ||
      (s[h] = f.map(([y, E]) => {
        let P = Object.create(null);
        for (E -= 1; E >= 0; E--) {
          let [x, j] = m[E];
          P[x] = j;
        }
        return [y, P];
      }));
  }
  let [o, c, a] = t.buildRegExp();
  for (let l = 0, h = s.length; l < h; l++)
    for (let u = 0, p = s[l].length; u < p; u++) {
      let R = s[l][u]?.[1];
      if (!R) continue;
      let f = Object.keys(R);
      for (let m = 0, y = f.length; m < y; m++) R[f[m]] = a[R[f[m]]];
    }
  let i = [];
  for (let l in c) i[l] = s[c[l]];
  return [o, i, n];
}
function O(e, t) {
  if (e) {
    for (let s of Object.keys(e).sort((r, n) => n.length - r.length))
      if (pe(s).test(t)) return [...e[s]];
  }
}
var z = class {
  name = "RegExpRouter";
  middleware;
  routes;
  constructor() {
    (this.middleware = { [d]: Object.create(null) }),
      (this.routes = { [d]: Object.create(null) });
  }
  add(e, t, s) {
    let { middleware: r, routes: n } = this;
    if (!r || !n) throw new Error(B);
    r[e] ||
      [r, n].forEach(a => {
        (a[e] = Object.create(null)),
          Object.keys(a[d]).forEach(i => {
            a[e][i] = [...a[d][i]];
          });
      }),
      t === "/*" && (t = "*");
    let o = (t.match(/\/:/g) || []).length;
    if (/\*$/.test(t)) {
      let a = pe(t);
      e === d
        ? Object.keys(r).forEach(i => {
            r[i][t] ||= O(r[i], t) || O(r[d], t) || [];
          })
        : (r[e][t] ||= O(r[e], t) || O(r[d], t) || []),
        Object.keys(r).forEach(i => {
          (e === d || e === i) &&
            Object.keys(r[i]).forEach(l => {
              a.test(l) && r[i][l].push([s, o]);
            });
        }),
        Object.keys(n).forEach(i => {
          (e === d || e === i) &&
            Object.keys(n[i]).forEach(l => a.test(l) && n[i][l].push([s, o]));
        });
      return;
    }
    let c = k(t) || [t];
    for (let a = 0, i = c.length; a < i; a++) {
      let l = c[a];
      Object.keys(n).forEach(h => {
        (e === d || e === h) &&
          ((n[h][l] ||= [...(O(r[h], l) || O(r[d], l) || [])]),
          n[h][l].push([s, o - i + a + 1]));
      });
    }
  }
  match(e, t) {
    Le();
    let s = this.buildAllMatchers();
    return (
      (this.match = (r, n) => {
        let o = s[r] || s[d],
          c = o[2][n];
        if (c) return c;
        let a = n.match(o[0]);
        if (!a) return [[], de];
        let i = a.indexOf("", 1);
        return [o[1][i], a];
      }),
      this.match(e, t)
    );
  }
  buildAllMatchers() {
    let e = Object.create(null);
    return (
      [...Object.keys(this.routes), ...Object.keys(this.middleware)].forEach(
        t => {
          e[t] ||= this.buildMatcher(t);
        }
      ),
      (this.middleware = this.routes = void 0),
      e
    );
  }
  buildMatcher(e) {
    let t = [],
      s = e === d;
    return (
      [this.middleware, this.routes].forEach(r => {
        let n = r[e] ? Object.keys(r[e]).map(o => [o, r[e][o]]) : [];
        n.length !== 0
          ? ((s ||= !0), t.push(...n))
          : e !== d && t.push(...Object.keys(r[d]).map(o => [o, r[d][o]]));
      }),
      s ? De(t) : null
    );
  }
};
var Y = class {
  name = "SmartRouter";
  routers = [];
  routes = [];
  constructor(e) {
    Object.assign(this, e);
  }
  add(e, t, s) {
    if (!this.routes) throw new Error(B);
    this.routes.push([e, t, s]);
  }
  match(e, t) {
    if (!this.routes) throw new Error("Fatal error");
    let { routers: s, routes: r } = this,
      n = s.length,
      o = 0,
      c;
    for (; o < n; o++) {
      let a = s[o];
      try {
        r.forEach(i => {
          a.add(...i);
        }),
          (c = a.match(e, t));
      } catch (i) {
        if (i instanceof I) continue;
        throw i;
      }
      (this.match = a.match.bind(a)),
        (this.routers = [a]),
        (this.routes = void 0);
      break;
    }
    if (o === n) throw new Error("Fatal error");
    return (this.name = `SmartRouter + ${this.activeRouter.name}`), c;
  }
  get activeRouter() {
    if (this.routes || this.routers.length !== 1)
      throw new Error("No active router has been determined yet.");
    return this.routers[0];
  }
};
var Q = class {
  methods;
  children;
  patterns;
  order = 0;
  name;
  params = Object.create(null);
  constructor(e, t, s) {
    if (
      ((this.children = s || Object.create(null)),
      (this.methods = []),
      (this.name = ""),
      e && t)
    ) {
      let r = Object.create(null);
      (r[e] = { handler: t, possibleKeys: [], score: 0, name: this.name }),
        (this.methods = [r]);
    }
    this.patterns = [];
  }
  insert(e, t, s) {
    (this.name = `${e} ${t}`), (this.order = ++this.order);
    let r = this,
      n = re(t),
      o = [];
    for (let i = 0, l = n.length; i < l; i++) {
      let h = n[i];
      if (Object.keys(r.children).includes(h)) {
        r = r.children[h];
        let p = $(h);
        p && o.push(p[1]);
        continue;
      }
      r.children[h] = new Q();
      let u = $(h);
      u && (r.patterns.push(u), o.push(u[1])), (r = r.children[h]);
    }
    r.methods.length || (r.methods = []);
    let c = Object.create(null),
      a = {
        handler: s,
        possibleKeys: o.filter((i, l, h) => h.indexOf(i) === l),
        name: this.name,
        score: this.order,
      };
    return (c[e] = a), r.methods.push(c), r;
  }
  gHSets(e, t, s, r) {
    let n = [];
    for (let o = 0, c = e.methods.length; o < c; o++) {
      let a = e.methods[o],
        i = a[t] || a[d],
        l = Object.create(null);
      i !== void 0 &&
        ((i.params = Object.create(null)),
        i.possibleKeys.forEach(h => {
          let u = l[i.name];
          (i.params[h] = r[h] && !u ? r[h] : (s[h] ?? r[h])), (l[i.name] = !0);
        }),
        n.push(i));
    }
    return n;
  }
  search(e, t) {
    let s = [];
    this.params = Object.create(null);
    let n = [this],
      o = D(t);
    for (let a = 0, i = o.length; a < i; a++) {
      let l = o[a],
        h = a === i - 1,
        u = [];
      for (let p = 0, R = n.length; p < R; p++) {
        let f = n[p],
          m = f.children[l];
        m &&
          ((m.params = f.params),
          h === !0
            ? (m.children["*"] &&
                s.push(
                  ...this.gHSets(
                    m.children["*"],
                    e,
                    f.params,
                    Object.create(null)
                  )
                ),
              s.push(...this.gHSets(m, e, f.params, Object.create(null))))
            : u.push(m));
        for (let y = 0, E = f.patterns.length; y < E; y++) {
          let P = f.patterns[y],
            x = { ...f.params };
          if (P === "*") {
            let N = f.children["*"];
            N &&
              (s.push(...this.gHSets(N, e, f.params, Object.create(null))),
              u.push(N));
            continue;
          }
          if (l === "") continue;
          let [j, Z, A] = P,
            w = f.children[j],
            ee = o.slice(a).join("/");
          if (A instanceof RegExp && A.test(ee)) {
            (x[Z] = ee), s.push(...this.gHSets(w, e, f.params, x));
            continue;
          }
          (A === !0 || (A instanceof RegExp && A.test(l))) &&
            typeof j == "string" &&
            ((x[Z] = l),
            h === !0
              ? (s.push(...this.gHSets(w, e, x, f.params)),
                w.children["*"] &&
                  s.push(...this.gHSets(w.children["*"], e, x, f.params)))
              : ((w.params = x), u.push(w)));
        }
      }
      n = u;
    }
    return [
      s
        .sort((a, i) => a.score - i.score)
        .map(({ handler: a, params: i }) => [a, i]),
    ];
  }
};
var X = class {
  name = "TrieRouter";
  node;
  constructor() {
    this.node = new Q();
  }
  add(e, t, s) {
    let r = k(t);
    if (r) {
      for (let n of r) this.node.insert(e, n, s);
      return;
    }
    this.node.insert(e, t, s);
  }
  match(e, t) {
    return this.node.search(e, t);
  }
};
var J = class extends G {
  constructor(e = {}) {
    super(e),
      (this.router = e.router ?? new Y({ routers: [new z(), new X()] }));
  }
};
var me = e => {
  let s = {
      ...{
        origin: "*",
        allowMethods: ["GET", "HEAD", "PUT", "POST", "DELETE", "PATCH"],
        allowHeaders: [],
        exposeHeaders: [],
      },
      ...e,
    },
    r = (n =>
      typeof n == "string"
        ? () => n
        : typeof n == "function"
          ? n
          : o => (n.includes(o) ? o : n[0]))(s.origin);
  return async function (o, c) {
    function a(l, h) {
      o.res.headers.set(l, h);
    }
    let i = r(o.req.header("origin") || "", o);
    if ((i && a("Access-Control-Allow-Origin", i), s.origin !== "*")) {
      let l = o.req.header("Vary");
      l ? a("Vary", l) : a("Vary", "Origin");
    }
    if (
      (s.credentials && a("Access-Control-Allow-Credentials", "true"),
      s.exposeHeaders?.length &&
        a("Access-Control-Expose-Headers", s.exposeHeaders.join(",")),
      o.req.method === "OPTIONS")
    ) {
      s.maxAge != null && a("Access-Control-Max-Age", s.maxAge.toString()),
        s.allowMethods?.length &&
          a("Access-Control-Allow-Methods", s.allowMethods.join(","));
      let l = s.allowHeaders;
      if (!l?.length) {
        let h = o.req.header("Access-Control-Request-Headers");
        h && (l = h.split(/\s*,\s*/));
      }
      return (
        l?.length &&
          (a("Access-Control-Allow-Headers", l.join(",")),
          o.res.headers.append("Vary", "Access-Control-Request-Headers")),
        o.res.headers.delete("Content-Length"),
        o.res.headers.delete("Content-Type"),
        new Response(null, {
          headers: o.res.headers,
          status: 204,
          statusText: o.res.statusText,
        })
      );
    }
    await c();
  };
};
async function ge(e) {
  let t = e.req.param("key"),
    s = await e.env.R2_BUCKET.get(t);
  if (s === null) return new Response("Object Not Found", { status: 404 });
  let r = new Headers();
  return (
    s.writeHttpMetadata(r),
    r.set("etag", s.httpEtag),
    r.set("Access-Control-Allow-Origin", "*"),
    new Response(s.body, { headers: r })
  );
}
async function ye(e) {
  let t = e.req.query("cursor"),
    s = await e.env.R2_BUCKET.list({ cursor: t || void 0 });
  return e.json(s);
}
async function Re(e) {
  let t = e.req.param("key"),
    s = await e.req.blob();
  return t
    ? (await e.env.R2_BUCKET.put(t, s), e.text("Done"))
    : e.text("file name is required", 400);
}
async function xe(e) {
  let t = e.req.param("key");
  return await e.env.R2_BUCKET.delete(t), new Response(null, { status: 204 });
}
async function Ee(e) {
  let t = e.req.param("key"),
    s = await e.env.R2_BUCKET.createMultipartUpload(t);
  return e.json({ key: s.key, uploadId: s.uploadId });
}
async function we(e) {
  let t = e.req.query("uploadId"),
    s = e.req.query("partNumber") || "",
    r = e.req.param("key");
  if (!t) return e.text("uploadId is required", 400);
  if (!s) return e.text("partNumber is required", 400);
  let n = Number(s);
  if (isNaN(n)) return e.text("partNumber must be a number", 400);
  let o = e.env.R2_BUCKET.resumeMultipartUpload(r, t);
  try {
    let c = await o.uploadPart(n, e.req.raw.body);
    return new Response(JSON.stringify(c));
  } catch (c) {
    return new Response(c.message, { status: 400 });
  }
}
async function be(e) {
  let t = e.req.param("key"),
    s = e.req.query("uploadId");
  if (!s) return e.text("uploadId is required", 400);
  let r = e.env.R2_BUCKET.resumeMultipartUpload(t, s);
  try {
    await r.abort();
  } catch (n) {
    return new Response(n.message, { status: 400 });
  }
  return new Response(null, { status: 204 });
}
async function ve(e) {
  let t = e.req.param("key"),
    s = e.req.query("uploadId");
  if (!s) return e.text("uploadId is required", 400);
  let r = e.env.R2_BUCKET.resumeMultipartUpload(t, s),
    n;
  try {
    n = await e.req.json();
  } catch (o) {
    return (
      console.log("parsing complete body failed"),
      console.log(o),
      e.text("invalid json", 400)
    );
  }
  try {
    let o = await r.complete(n.parts);
    return new Response(null, { headers: { etag: o.httpEtag } });
  } catch (o) {
    return new Response(o.message, { status: 400 });
  }
}
function Ce(e) {
  return e.text("yes");
}
function $e(e) {
  if (!e.env.AUTH_KEY_SECRET) return e.text("AUTH_KEY_SECRET is not set", 403);
  let t = e.req.header("x-api-key") === e.env.AUTH_KEY_SECRET;
  return e.req.method === "GET"
    ? e.env.PRIVATE_BUCKET
      ? t
      : !0
    : ["POST", "PATCH", "PUT", "DELETE"].includes(e.req.method)
      ? t
      : e.req.method === "OPTIONS";
}
async function Oe(e, t) {
  return (
    $e(e) && (console.log("Header is valid"), await t()),
    e.json({ status: 401, message: "Unauthorized" })
  );
}
var g = new J();
g.use("*", Oe);
g.use(me());
g.get("/", e => e.text("Hello R2! v2024.07.12"));
g.get("/support_mpu", Ce);
g.post("/mpu/create/:key{.*}", Ee);
g.put("/mpu/:key{.*}", we);
g.delete("/mpu/:key{.*}", be);
g.post("/mpu/complete/:key{.*}", ve);
g.get("/:key{.*}", ge);
g.patch("/", ye);
g.put("/:key{.*}", Re);
g.delete("/:key{.*}", xe);
g.all("*", e => e.text("404 Not Found"));
var gr = g;
export { gr as default };
//# sourceMappingURL=index.js.map

  1. 进入到「设置」页面，选择「变量」，然后点击「编辑变量」按钮，添加环境变量。首先设置第一个变量名为 AUTH_KEY_SECRET，变量值为随机字符，可以在此处生成一个。然后设置第二个变量名为 PRIVATE_BUCKET，变量值为 true。因为默认情况下，Worker 会允许所有 GET 请求通过，这意味着只要知道 Woker 的 URL，任何人都可以访问您的文件。所以添加这个环境变量，将使 Worker 检查每个请求的 x-api-key 标头，并只允许带有正确 API 密钥的请求通过。添加完成后，点击「部署」按钮。

  2. 下拉这个页面找到「R2 存储桶绑定」，点击「编辑变量」按钮，添加存储桶。在变量名称初填写 R2_BUCKET，然后选择您的存储桶，点击「部署」按钮。

  3. 在这个页面中选择「触发器」，点击「添加自定义域」按钮，为 Worker 添加一个域名。如果您身处中国大陆，建议添加，因为默认的 workers.dev 域名被 GFW 屏蔽了，不能正常工作。您也可以不添加自定义域名，那么就是使用红框中的路由地址。

  4. 大功告成，R2 Uploader 的 Worker 就配置好了。现在点击您在上一步中添加的自定义域名或者路由地址，就会在新页面中看到 {"status":401,"message":"Unauthorized"} 的字样，这是因为在第七步中我们添加了存储桶私有的环境变量。如果您在第七步中没有添加该变量，将会看到 Hello R2! 的字样。

部署前端界面

理论上，当配置完 R2 Uploader 的 Worker 后，就可以使用了。例如，您可以直接使用该项目的开发者提供的前端界面。但我更建议自己部署一个前端界面。 R2 Uploader 的社区贡献者提供了使用 Docker 部署的方式。

以在 Zeabur 上部署为例，简单介绍。您可以选择在 VPS 上部署。

  1. 在 GitHub 上打开 R2 Uploader 的项目页面，将其 fork 到自己的仓库。

  2. 在 Zeabur 上新建项目，选择从 GitHub 仓库部署，选择刚 fork 的 R2 Uploader 项目。

  3. 点击「部署」按钮，等待部署完成。

  4. 在「网络」中生成一个域名或添加自定义域名。

  5. 大功告成，现在您就可以访问前端界面了。

在前端界面进行设置

  1. 展开「Endpoints」

  2. 在 Wokers Endpoint 中输入您在配置 R2 Uploader Worker 时，在「触发器」中自定义的域名或者 worker 的默认路由。

  3. 在 Workers Endpoint API Key 中输入您在配置 R2 Uploader Worker 时，在第七步中设置的环境变量 AUTH_KEY_SECRET 的值，是您生成的一段随机字符，可以在 Woker 的变量中查看。

  4. 点击 Save To LocalStorage。R2 Uploader 不会将您的 Endpoint 或 API Key 存储在云中，而是存储在浏览器的 LocalStorage 中，这意味着只有您才能访问。所有流量都会经过 Worker 和您的 R2 存储桶。

  5. （可选）您可以选择登陆 GitHub，保存您的 Endpoints 中的设置的数据。不过我并没有这样做，而是将这些数据保存在 Bitwarden 中。

现在您就可以在这个前端页面中看到您在 R2 中存储的文件了。

在 Upload Files 中可以选择上传单个文件或者文件夹。

File List 中会显示您的存储桶中有多少个文件，使用了多少空间。文件列表默认按照文件夹的形式进行展示，您可以点击文件名称在新页面打开文件，或者点击 “Delete” 按钮删除文件。如果您不像以文件夹的形式展示，取消 “Folder Structure” 的勾选即可。

如果您和我一样，按照 Pseudoyu 的教程为 R2 中保存的文件配置了 WebP Cloud，您会发现点击文件名无法打开图片。这是因为在配置 WebP Cloud 时，在 Cloudflare 的防火墙中设置了禁止请求文件源站。

不过不必担心，在 Endpoints 中点击 “edit” 按钮，在 Custom Domain 中输入 WebP Cloud 为您分配的域名（不需要有 “https://”），然后点击保存即可。

现在您在点击文件名，就可以直接通过 WebP Cloud 的代理打开图片了。

另外在提一点，WebP Cloud 刚刚上线了「自适应调整大小」的功能，在 Proxy 中打开 Adaptive Resizer 即可。WebP Cloud 将根据访问者的设备处理不同尺寸的图片渲染。

以上就是部署和配置 R2 Uploader 的全部步骤。

Reference

  1. https://r2.jw1.dev/setup-guide/

  2. https://github.com/jw-12138/r2-uploader