通过 Worker 上传

您可以使用 Worker 将图像上传到 Cloudflare Images。

请参阅以下示例或参阅 Workers 文档了解更多信息。

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "<YOUR_TOKEN_HERE>";

const image = await fetch("https://example.com/image.png");
const bytes = await image.bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.png"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "<YOUR_TOKEN_HERE>";

const image = await fetch("https://example.com/image.png");
const bytes = await image.bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.png"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

从 AI 生成的图像上传

您可以使用 AI Worker 生成图像，然后上传该图像以存储在 Cloudflare Images 中。有关使用 Workers AI 生成图像的更多信息，请参阅 SDXL-Lightning Model。

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "YOUR_TOKEN_HERE";

const stream = await env.AI.run("@cf/bytedance/stable-diffusion-xl-lightning", {
	prompt: YOUR_PROMPT_HERE,
});
const bytes = await new Response(stream).bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.jpg"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "YOUR_TOKEN_HERE";

const stream = await env.AI.run("@cf/bytedance/stable-diffusion-xl-lightning", {
	prompt: YOUR_PROMPT_HERE,
});
const bytes = await new Response(stream).bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.jpg"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});