feat: add new functions for mp image upload

.gitignore

@@ -55,4 +55,5 @@ components.d.ts
 
 .wxt
 .output
-web-ext.config.ts
+web-ext.config.ts
+.wrangler

docker/latest/patch/vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
   define: {
     process,
   },
+  envPrefix: [`VITE_`, `CF_`], // 允许 VITE_ 和 CF_ 前缀的变量
   plugins: [
     vue(),
     UnoCSS(),

functions/cgi-bin/material/add_material/index.ts

@@ -0,0 +1,16 @@
+import { parseFormDataRequest } from '../../../parseFormDataRequest'
+import { jsonResponse, MP_HOST } from '../../../utils'
+
+export const onRequestPost: PagesFunction = async (context) => {
+  const formData = (await parseFormDataRequest(context.request)) as FormData
+  const url = new URL(context.request.url)
+  const response = await fetch(
+    `${MP_HOST}${context.functionPath}${url.search}`,
+    {
+      method: `POST`,
+      body: formData,
+    },
+  )
+  const json = await response.json()
+  return jsonResponse(json)
+}

functions/cgi-bin/media/uploadimg/index.ts

@@ -0,0 +1,5 @@
+import { onRequestPost as post } from '../../material/add_material/index'
+
+export const onRequestPost: PagesFunction = async (context) => {
+  return post(context)
+}

functions/cgi-bin/stable_token.ts

@@ -0,0 +1,13 @@
+import { jsonResponse, MP_HOST } from '../utils'
+
+export const onRequestPost: PagesFunction = async (context) => {
+  const response = await fetch(
+    `${MP_HOST}${context.functionPath}`,
+    {
+      method: `POST`,
+      body: context.request.body,
+    },
+  )
+  const json = await response.json()
+  return jsonResponse(json)
+}

functions/parseFormDataRequest.ts

@@ -0,0 +1,40 @@
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-nocheck
+// @see https://github.com/cloudflare/images.pages.dev/blob/main/functions/utils/parseFormDataRequest.ts
+import { parseMultipart } from '@ssttevee/multipart-parser'
+
+const RE_MULTIPART
+  = /^multipart\/form-data;\s*boundary=(?:"((?:[^"]|\\")+)"|([^\s;]+))$/
+
+function getBoundary(request: Request): string | undefined {
+  const contentType = request.headers.get(`Content-Type`)
+  if (!contentType)
+    return
+
+  const matches = RE_MULTIPART.exec(contentType)
+  if (!matches)
+    return
+
+  return matches[1] || matches[2]
+}
+
+export async function parseFormDataRequest(request: Request): Promise<FormData | undefined> {
+  const boundary = getBoundary(request)
+  if (!boundary || !request.body)
+    return
+
+  const parts = await parseMultipart(request.body, boundary)
+
+  const formData = new FormData()
+
+  for (const { name, data, filename, contentType } of parts) {
+    formData.append(
+      name,
+      filename
+        ? new File([data], filename, { type: contentType })
+        : new TextDecoder().decode(data),
+    )
+  }
+
+  return formData
+}

functions/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "types": ["@cloudflare/workers-types"]
+  }
+}

functions/utils.ts

@@ -0,0 +1,8 @@
+export const MP_HOST = `https://api.weixin.qq.com`
+
+export function jsonResponse(value: any, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(value), {
+    headers: { 'Content-Type': `application/json`, ...init.headers },
+    ...init,
+  })
+}