导航|地址|刷新
Upload Image
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图
图

Upload an image
Upload `; export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { // This is called when the user submits the form } }, }; ``` ```ts const html = ` !DOCTYPE html>
Upload an image
Upload `; interface Env { IMAGES: ImagesBinding; R2: R2Bucket; ASSETS: Fetcher; } export default { async fetch(request: Request, env: Env): Promise { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { // This is called when the user submits the form } }, } satisfies ExportedHandler; ``` ## 3: Read the uploaded image After you have a `form`, you need to make sure you can transform the uploaded images. Because the `form` lets users upload directly from their disk, you cannot use `fetch()` to get an image from a URL. Instead, you will operate on the body of the image as a stream of bytes. To do this, parse the uploaded file from the `form` and get its stream: ```js export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); } catch (err) { console.log(err.message); } } }, }; ``` ```ts export default { async fetch(request: Request, env: Env): Promise { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); } catch (err) { console.log((err as Error).message); } } }, } satisfies ExportedHandler; ``` Prevent potential errors when accessing request.body The body of a [Request ↗](https://developer.mozilla.org/en-US/docs/Web/API/Request) can only be accessed once. If you previously used `request.formData()` in the same request, you may encounter a TypeError when attempting to access `request.body`. To avoid errors, create a clone of the Request object with `request.clone()` for each subsequent attempt to access a Request's body. Keep in mind that Workers have a [memory limit of 128 MB per Worker](https://developers.cloudflare.com/workers/platform/limits/#memory) and loading particularly large files into a Worker's memory multiple times may reach this limit. To ensure memory usage does not reach this limit, consider using [Streams](https://developers.cloudflare.com/workers/runtime-apis/streams/). ## 4: Transform the image For every uploaded image, you want to perform the following actions: * Overlay the visual watermark that we added to our assets directory. * Transcode the image — with its watermark — to `AVIF`. This compresses the image and reduces its file size. * Upload the transformed image to R2. ### Set up the overlay image To fetch the overlay image from the assets directory, create a function `assetUrl` then use `env.ASSETS` to retrieve the `watermark.png` image: ```js function assetUrl(request, path) { const url = new URL(request.url); url.pathname = path; return url; } export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); // Fetch image as watermark const watermarkResponse = await env.ASSETS.fetch( assetUrl(request, "watermark.png"), ); const watermarkStream = watermarkResponse.body; } catch (err) { console.log(err.message); } } }, }; ``` ```ts function assetUrl(request: Request, path: string): URL { const url = new URL(request.url); url.pathname = path; return url; } export default { async fetch(request: Request, env: Env): Promise { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); // Fetch image as watermark const watermarkResponse = await env.ASSETS.fetch( assetUrl(request, "watermark.png"), ); const watermarkStream = watermarkResponse.body; } catch (err) { console.log((err as Error).message); } } }, } satisfies ExportedHandler; ``` ### Watermark and transcode the image You can interact with the Images binding through `env.IMAGES`. This is where you will put all of the optimization operations you want to perform on the image. Here, you will use the `.draw()` function to apply a visual watermark over the uploaded image, then use `.output()` to encode the image as AVIF: ```js function assetUrl(request, path) { const url = new URL(request.url); url.pathname = path; return url; } export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); // Fetch image as watermark const watermarkResponse = await env.ASSETS.fetch( assetUrl(request, "watermark.png"), ); const watermarkStream = watermarkResponse.body; if (!watermarkStream) { return new Response("Failed to fetch watermark", { status: 500 }); } // Apply watermark and convert to AVIF const imageResponse = ( await env.IMAGES.input(fileStream) // Draw the watermark on top of the image .draw( env.IMAGES.input(watermarkStream).transform({ width: 100, height: 100, }), { bottom: 10, right: 10, opacity: 0.75 }, ) // Output the final image as AVIF .output({ format: "image/avif" }) ).response(); } catch (err) { console.log(err.message); } } }, }; ``` ```ts function assetUrl(request: Request, path: string): URL { const url = new URL(request.url); url.pathname = path; return url; } export default { async fetch(request: Request, env: Env): Promise { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); // Fetch image as watermark const watermarkResponse = await env.ASSETS.fetch( assetUrl(request, "watermark.png"), ); const watermarkStream = watermarkResponse.body; if (!watermarkStream) { return new Response("Failed to fetch watermark", { status: 500 }); } // Apply watermark and convert to AVIF const imageResponse = ( await env.IMAGES.input(fileStream) // Draw the watermark on top of the image .draw( env.IMAGES.input(watermarkStream).transform({ width: 100, height: 100, }), { bottom: 10, right: 10, opacity: 0.75 }, ) // Output the final image as AVIF .output({ format: "image/avif" }) ).response(); } catch (err) { console.log((err as Error).message); } } }, } satisfies ExportedHandler; ``` ## 5: Upload to R2 Upload the transformed image to R2. By creating a `fileName` variable, you can specify the name of the transformed image. In this example, you append the date to the name of the original image before uploading to R2. Here is the full code for the example: ```js const html = ` !DOCTYPE html>
Upload an image
Upload `; function assetUrl(request, path) { const url = new URL(request.url); url.pathname = path; return url; } export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, { headers: { "Content-Type": "text/html" } }); } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.stream !== "function") { return new Response("No image file provided", { status: 400 }); } // Get uploaded image as a readable stream const fileStream = file.stream(); // Fetch image as watermark const watermarkResponse = await env.ASSETS.fetch( assetUrl(request, "watermark.png"), ); const watermarkStream = watermarkResponse.body; if (!watermarkStream) { return new Response("Failed to fetch watermark", { status: 500 }); } // Apply watermark and convert to AVIF const imageResponse = ( await env.IMAGES.input(fileStream) // Draw the watermark on top of the image .draw( env.IMAGES.input(watermarkStream).transform({ width: 100, height: 100, }), { bottom: 10, right: 10, opacity: 0.75 }, ) // Output the final image as AVIF .output({ format: "image/avif" }) ).response(); // Add timestamp to file name const fileName = `image-${Date.now()}.avif`; // Upload to R2 await env.R2.put(fileName, imageResponse.body); return new Response(`Image uploaded successfully as ${fileName}`, { status: 200, }); } catch (err) { console.log(err.message); return new Response("Internal error", { status: 500 }); } } return new Response("Method not allowed", { status: 405 }); }, }; ``` ```ts interface Env { IMAGES: ImagesBinding; R2: R2Bucket; ASSETS: Fetcher; } const html = ` !DOCTYPE html>
Upload an image
Upload
------
导航页 打开网址