支持使用公开部署的服务上传图片

Kadxy · Kadxy · commit 0af209c78128 · 2024-09-29T15:31:27.000+08:00
diff --git a/app/pages/Kling.tsx b/app/pages/Kling.tsx
@@ -18,6 +18,7 @@ import { Kling, KlingApiTypes, KlingTask } from "@/app/providers/kling";
 import { renderCode, RenderSubmitter } from "../render";
 import { beforeUpload, safeJsonStringify } from "../utils";
 import { ascetic } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { uploadToGetFileUrl } from "../utils/upload-to-server";
 
 const MODE_OPTIONS = [
   { label: "Std-标准模式（高性能）", value: "std" },
@@ -48,6 +49,8 @@ const KlingPage = () => {
   const [klingImage2VideoForm] = ProForm.useForm();
   const [klingQueryTaskForm] = ProForm.useForm();
 
+  const [uploadType, setUploadType] = useState<"base64" | "url">("base64");
+
   const [taskData, setTaskData] = useState<KlingTask[]>([]);
   const [errorData, setErrorData] = useState<any>(null);
 
@@ -334,7 +337,6 @@ const KlingPage = () => {
     updateTask: (data: KlingTask) => void;
     updateError: (error: any) => void;
   }) => {
-    const [uploadType, setUploadType] = useState<"base64" | "url">("base64");
     const [abortController, setAbortController] = useState<AbortController | null>(null);
     const [submitting, setSubmitting] = useState(false);
 
@@ -390,13 +392,11 @@ const KlingPage = () => {
             label="Upload Type"
             options={[
               { label: "Base64", value: "base64" },
-              // TODO: 支持url上传，目前接口维护，后续开放
-              { label: "URL", value: "url", disabled: true },
+              { label: "URL", value: "url" },
             ]}
             fieldProps={{
               value: uploadType,
               onChange: (e) => {
-                // 当上传类型改变时，清空图片和图片尾帧当上传类型改变时，清空图片和图片尾帧
                 props.form.resetFields(["image", "image_tail"]);
                 setUploadType(e.target.value);
               },
@@ -417,7 +417,6 @@ const KlingPage = () => {
                 <p>图片文件大小不能超过10MB，图片分辨率不小于300*300px</p>
               </>
             }
-            action={uploadType === "url" ? appConfig.getUploadConfig().action : undefined}
             fieldProps={{
               listType: "picture-card",
               beforeUpload: async (file) =>
@@ -431,23 +430,30 @@ const KlingPage = () => {
                   (msg) => message.error(msg),
                 ),
               ...(uploadType === "url" && {
-                headers: {
-                  Authorization: appConfig.getUploadConfig().auth,
+                customRequest: async (options) => {
+                  try {
+                    const fileUrl = await uploadToGetFileUrl(options.file as File);
+                    if (fileUrl) {
+                      options.onSuccess?.(fileUrl, options.file);
+                    } else {
+                      options.onError?.(new Error("上传失败"), options.file);
+                    }
+                  } catch (error) {
+                    console.error("Upload error:", error);
+                    options.onError?.(error as Error, options.file);
+                  }
                 },
                 onChange: (info) => {
-                  const getValueByPosition = (obj: any, position: readonly any[]) => {
-                    return position.reduce((acc, key) => acc && acc[key], obj);
-                  };
-
                   if (info.file.status === "done") {
-                    try {
-                      const response = info.file.response;
-                      if (response) {
-                        info.file.url = getValueByPosition(response, appConfig.getUploadConfig().position);
-                      }
-                    } catch (e) {
-                      console.error(e);
+                    const fileUrl = info.file.response;
+                    if (fileUrl && typeof fileUrl === "string") {
+                      info.file.url = fileUrl;
+                    } else {
+                      info.file.status = "error";
+                      message.error("上传失败");
                     }
+                  } else if (info.file.status === "error") {
+                    message.error("上传失败");
                   }
                 },
               }),
@@ -476,7 +482,6 @@ const KlingPage = () => {
                 <p>图片文件大小不能超过10MB，图片分辨率不小于300*300px</p>
               </>
             }
-            action={uploadType === "url" ? appConfig.getUploadConfig().action : undefined}
             fieldProps={{
               listType: "picture-card",
               beforeUpload: async (file) =>
@@ -490,23 +495,30 @@ const KlingPage = () => {
                   (msg) => message.error(msg),
                 ),
               ...(uploadType === "url" && {
-                headers: {
-                  Authorization: appConfig.getUploadConfig().auth,
+                customRequest: async (options) => {
+                  try {
+                    const fileUrl = await uploadToGetFileUrl(options.file as File);
+                    if (fileUrl) {
+                      options.onSuccess?.(fileUrl, options.file);
+                    } else {
+                      options.onError?.(new Error("上传失败"), options.file);
+                    }
+                  } catch (error) {
+                    console.error("Upload error:", error);
+                    options.onError?.(error as Error, options.file);
+                  }
                 },
                 onChange: (info) => {
-                  const getValueByPosition = (obj: any, position: readonly any[]) => {
-                    return position.reduce((acc, key) => acc && acc[key], obj);
-                  };
-
                   if (info.file.status === "done") {
-                    try {
-                      const response = info.file.response;
-                      if (response) {
-                        info.file.url = getValueByPosition(response, appConfig.getUploadConfig().position);
-                      }
-                    } catch (e) {
-                      console.error(e);
+                    const fileUrl = info.file.response;
+                    if (fileUrl && typeof fileUrl === "string") {
+                      info.file.url = fileUrl;
+                    } else {
+                      info.file.status = "error";
+                      message.error("上传失败");
                     }
+                  } else if (info.file.status === "error") {
+                    message.error("上传失败");
                   }
                 },
               }),
diff --git a/app/store/config.ts b/app/store/config.ts
@@ -5,10 +5,7 @@ export enum Theme {
   Light = "light",
 }
 
-interface APIKey {
-  provider: Provider;
-  apiKey: string;
-}
+type APIKeys = Array<{ apiKey: string }>;
 
 type AvailableUploadServerProvider = Provider.NextAPI | Provider.ProxyAPI;
 
@@ -77,11 +74,15 @@ export const api2ProviderBaseUrl = {
 
 export const UPLOAD_INFO = {
   [Provider.NextAPI]: {
-    action: [[ProviderBaseUrlMap[Provider.NextAPI]], "fileSystem/upload"].join("/"),
+    action: [[ProviderBaseUrlMap[Provider.NextAPI]], "fileSystem/upload"].join(
+      "/",
+    ),
     position: ["url"],
   },
   [Provider.ProxyAPI]: {
-    action: [[ProviderBaseUrlMap[Provider.ProxyAPI]], "fileSystem/upload"].join("/"),
+    action: [[ProviderBaseUrlMap[Provider.ProxyAPI]], "fileSystem/upload"].join(
+      "/",
+    ),
     position: ["url"],
   },
   // [Provider.GodAPI]: {
@@ -91,23 +92,16 @@ export const UPLOAD_INFO = {
 } as const;
 
 const DEFAULT_CONFIG = {
-  apiKeys: [] as APIKey[],
-  uploadServerProvider: Provider.NextAPI as AvailableUploadServerProvider,
+  apiKeys: [] as APIKeys,
   theme: Theme.Light as Theme,
   lastUpdate: Date.now(),
 } as const;
 
 export const useAppConfig = createPersistStore(
   { ...DEFAULT_CONFIG },
   (_set, get) => ({
-    getFirstApiKey(provider: Provider): string {
-      const key = get().apiKeys.find((item) => item.provider === provider)?.apiKey;
-      if (key) {
-        return key;
-      } else {
-        console.error(`No API key found for provider ${PROVIDER_NAME[provider]}`);
-        return "";
-      }
+    getSelectedApiKey(): string {
+      return get().apiKeys[0]?.apiKey || "";
     },
 
     getUploadConfig(): UploadConfig {
@@ -118,7 +112,7 @@ export const useAppConfig = createPersistStore(
       return {
         action: UPLOAD_INFO[provider].action,
         position: UPLOAD_INFO[provider].position,
-        auth: "Bearer " + this.getFirstApiKey(provider),
+        auth: "Bearer " + this.getSelectedApiKey(provider),
       };
     },
   }),
diff --git a/app/utils/upload-to-server.ts b/app/utils/upload-to-server.ts
@@ -0,0 +1,127 @@
+// FileCodeBox
+
+const SERVER_URL = "https://uploader.shell-api.com";
+
+// 上传
+// curl 'https://uploader.shell-api.com/share/file/' \
+//   -H 'accept: */*' \
+//   -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary45julFmDaGJVCTNt' \
+//   --data-raw $'------WebKitFormBoundary45julFmDaGJVCTNt\r\nContent-Disposition: form-data; name="file"; filename="a5163c4c-ed8a-4251-bd4e-56cbf7689c49 (2).ico"\r\nContent-Type: image/vnd.microsoft.icon\r\n\r\n\r\n------WebKitFormBoundary45julFmDaGJVCTNt\r\nContent-Disposition: form-data; name="expire_value"\r\n\r\n1\r\n------WebKitFormBoundary45julFmDaGJVCTNt\r\nContent-Disposition: form-data; name="expire_style"\r\n\r\nminute\r\n------WebKitFormBoundary45julFmDaGJVCTNt--\r\n'
+
+interface UploadToServerResponse {
+  /**
+   * 200 - 成功
+   */
+  code: number;
+  message: string;
+  detail: {
+    /**
+     * xxxxx，五位数密码
+     */
+    code: number;
+    /**
+     * 文件名
+     */
+    name: string;
+  };
+}
+
+// 查询
+// http://uploader.shell-api.com/#/?code=84340
+
+// curl 'http://uploader.shell-api.com/share/select/' \
+//   --data-raw '{"code":"89577"}' \
+//   --insecure
+
+// {
+//     "code": 200,
+//     "message": "ok",
+//     "detail": {
+//         "code": "89577",
+//         "name": "a5163c4c-ed8a-4251-bd4e-56cbf7689c49 (3).ico",
+//         "size": 9259,
+//         "text": "/share/download?key=1fe9d27aed68a599abd5cf0fea068a2ccc9f5c7482c509a97129e52b600d831d&code=89577"
+//     }
+// }
+
+// {"code":404,"message":"ok","detail":"文件不存在"}
+// {"detail":"请求次数过多，请稍后再试"}
+
+interface GetFileUrlResponse {
+  /**
+   * 200 - 成功
+   */
+  code: number;
+  message: string;
+  detail: {
+    /**
+     * 五位数密码
+     */
+    code: number;
+    /**
+     * 文件名
+     */
+    name: string;
+    /**
+     * 文件大小
+     */
+    size: number;
+    /**
+     * 下载链接
+     */
+    text: string;
+  };
+}
+
+async function _uploadToServer(file: File) {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("expire_value", "10");
+  formData.append("expire_style", "minute");
+
+  try {
+    const response = await fetch(`${SERVER_URL}/share/file/`, {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = (await response.json()) as UploadToServerResponse;
+    if (data.code !== 200) {
+      throw new Error(data.message);
+    }
+    return data.detail.code;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+async function _getFileUrl(code: string): Promise<string> {
+  try {
+    const response = await fetch(`${SERVER_URL}/share/select/`, {
+      method: "POST",
+      body: JSON.stringify({ code }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    const data = (await response.json()) as GetFileUrlResponse;
+    if (data.code !== 200) {
+      throw new Error(data?.message);
+    }
+    return `${SERVER_URL}${data.detail.text}`;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+export async function uploadToGetFileUrl(file: File): Promise<string> {
+  try {
+    const code = await _uploadToServer(file);
+    return await _getFileUrl(code.toString());
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
diff --git a/package.json b/package.json
@@ -19,6 +19,8 @@
     "@ant-design/icons": "^5.5.1",
     "@ant-design/nextjs-registry": "^1.0.0",
     "@ant-design/pro-components": "^2.7.19",
+    "@aws-sdk/client-s3": "^3.658.1",
+    "@aws-sdk/s3-request-presigner": "^3.658.1",
     "@fortaine/fetch-event-source": "^3.0.6",
     "@types/file-saver": "^2.0.7",
     "ai-model-hub": "^1.2.1",
diff --git a/yarn.lock b/yarn.lock
