架構藍圖：圖片上傳與處理流水線

CREATE TABLE images (
  id        TEXT PRIMARY KEY,
  key       TEXT NOT NULL,
  status    TEXT NOT NULL DEFAULT 'pending',
  width     INTEGER,
  height    INTEGER,
  variants  INTEGER NOT NULL DEFAULT 0,
  created_at TEXT NOT NULL DEFAULT (datetime('now'))
);

CREATE TABLE variants (
  id        TEXT PRIMARY KEY,
  image_id  TEXT NOT NULL REFERENCES images(id),
  label     TEXT NOT NULL,
  key       TEXT NOT NULL,
  width     INTEGER NOT NULL
);

-- Fast lookups of jobs still waiting to be processed
CREATE INDEX idx_images_status ON images (status);

<input type="file" id="file" accept="image/*" />
<button id="send">Upload</button>

<script>
  document.getElementById("send").onclick = async () => {
    const file = document.getElementById("file").files[0];

    // Stream the raw bytes straight to the Upload Worker
    const res = await fetch("/upload", {
      method: "POST",
      headers: { "content-type": file.type },
      body: file,
    });

    const job = await res.json(); // { id, status: "pending" }
    console.log("Queued job", job.id, "->", job.status);
  };
</script>

export default {
  // PRODUCER: store the upload, then enqueue a background job
  async fetch(request, env, ctx) {
    if (request.method !== "POST") {
      return new Response("Use POST to upload", { status: 405 });
    }

    const id = crypto.randomUUID();
    const key = `originals/${id}`;
    const bytes = await request.arrayBuffer();
    const contentType = request.headers.get("content-type") || "image/jpeg";

    // 1) Save the ORIGINAL image to R2
    await env.IMAGES_BUCKET.put(key, bytes, {
      httpMetadata: { contentType },
    });

    // 2) Record metadata in D1 with status = pending
    await env.DB.prepare(
      "INSERT INTO images (id, key, status) VALUES (?, ?, 'pending')"
    ).bind(id, key).run();

    // 3) Enqueue a job and reply instantly (do NOT wait for processing)
    await env.IMAGE_QUEUE.send({ id, key });

    return Response.json({ id, status: "pending" }, { status: 202 });
  },
};

export default {
  // CONSUMER: Cloudflare invokes this with a batch of queued jobs
  async queue(batch, env, ctx) {
    for (const message of batch.messages) {
      try {
        const { id, key } = message.body;

        // 1) Read the original back from R2
        const original = await env.IMAGES_BUCKET.get(key);
        if (!original) {
          message.ack(); // nothing to do
          continue;
        }

        // 2) Build optimized variants with the Images binding
        const sizes = [256, 1024];
        const variantKeys = [];
        for (const width of sizes) {
          const result = await env.IMAGES
            .input(original.body)
            .transform({ width })
            .output({ format: "image/webp" });

          const variantKey = `variants/${id}/w${width}.webp`;
          await env.IMAGES_BUCKET.put(variantKey, result.image());
          variantKeys.push(variantKey);
        }

        // 3) Mark the row ready and record how many variants exist
        await env.DB.prepare(
          "UPDATE images SET status = 'ready', variants = ? WHERE id = ?"
        ).bind(variantKeys.length, id).run();

        message.ack(); // success — never deliver again
      } catch (err) {
        message.retry(); // failure — Queues will redeliver later
      }
    }
  },
};

<!-- Resize + convert on the fly with a transformation URL -->
<!-- /cdn-cgi/image/<options>/<source-path> -->

<img
  src="https://media.example.com/cdn-cgi/image/width=512,quality=80,format=auto/variants/abc123/w1024.webp"
  width="512"
  alt="optimized photo"
/>