完成80%

utils/resumable-image-upload.js

@@ -9,6 +9,11 @@ const createUploadError = (message, code) => {
 
 export const isImagePickCancelled = (error) => error?.code === "IMAGE_PICK_CANCELLED";
 
+const createUploadId = () => {
+  if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
+  return `app-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+
 const pickNativeImage = () => new Promise((resolve, reject) => {
   if (!globalThis.plus?.gallery?.pick) {
     reject(createUploadError("当前运行环境不支持从相册选择图片", "IMAGE_PICK_UNAVAILABLE"));
@@ -21,6 +26,53 @@ const pickNativeImage = () => new Promise((resolve, reject) => {
   );
 });
 
+const pickBrowserImage = () => new Promise((resolve, reject) => {
+  if (typeof globalThis.document?.createElement !== "function" || typeof globalThis.FileReader !== "function") {
+    reject(createUploadError("当前运行环境不支持选择图片", "IMAGE_PICK_UNAVAILABLE"));
+    return;
+  }
+  const input = globalThis.document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
+  input.style.display = "none";
+  const cleanup = () => input.remove();
+  input.addEventListener("cancel", () => {
+    cleanup();
+    reject(createUploadError("已取消选择图片", "IMAGE_PICK_CANCELLED"));
+  }, { once: true });
+  input.addEventListener("change", () => {
+    const browserFile = input.files?.[0];
+    if (!browserFile) {
+      cleanup();
+      reject(createUploadError("已取消选择图片", "IMAGE_PICK_CANCELLED"));
+      return;
+    }
+    const reader = new globalThis.FileReader();
+    reader.onload = () => {
+      const data = reader.result;
+      cleanup();
+      if (!(data instanceof ArrayBuffer)) {
+        reject(createUploadError("读取图片数据失败", "IMAGE_READ_INVALID"));
+        return;
+      }
+      resolve({
+        browserFile,
+        fileName: browserFile.name || "image",
+        size: browserFile.size,
+        contentType: browserFile.type || "image/*",
+        data,
+      });
+    };
+    reader.onerror = () => {
+      cleanup();
+      reject(createUploadError("读取图片数据失败", "IMAGE_READ_FAILED"));
+    };
+    reader.readAsArrayBuffer(browserFile);
+  }, { once: true });
+  globalThis.document.body?.append(input);
+  input.click();
+});
+
 const readNativeImage = (filePath) => new Promise((resolve, reject) => {
   if (!globalThis.plus?.io?.resolveLocalFileSystemURL || !globalThis.plus?.io?.FileReader) {
     reject(createUploadError("当前运行环境不支持读取图片", "IMAGE_READ_UNAVAILABLE"));
@@ -54,11 +106,6 @@ const readNativeImage = (filePath) => new Promise((resolve, reject) => {
   );
 });
 
-const createUploadId = () => {
-  if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
-  return `app-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-};
-
 export const toConsumerOssId = (ossId) => {
   if (typeof ossId !== "string" || !/^[1-9]\d*$/.test(ossId)) {
     throw createUploadError("文件服务返回的文件 ID 无效", "OSS_ID_INVALID");
@@ -89,15 +136,15 @@ const toUploadReceipt = ({ ossId, url = "", thumbnailUrl = "", fileName = "" })
 });
 
 export const pickAndUploadImage = async ({ requestController = null } = {}) => {
-  const filePath = await pickNativeImage();
-  const file = await readNativeImage(filePath);
+  const file = globalThis.plus?.gallery?.pick
+    ? await readNativeImage(await pickNativeImage())
+    : await pickBrowserImage();
   if (!Number.isSafeInteger(file.size) || file.size <= 0) {
     throw createUploadError("所选图片大小无效", "IMAGE_SIZE_INVALID");
   }
   const fileMd5 = calcMD5Bytes(file.data);
-  const uploadId = createUploadId();
   const initPayload = {
-    uploadId,
+    uploadId: createUploadId(),
     fileName: file.fileName,
     fileMd5,
     totalSize: file.size,
@@ -107,12 +154,16 @@ export const pickAndUploadImage = async ({ requestController = null } = {}) => {
   };
   const initialized = await appApi.initializeResumableUpload(initPayload, { requestController });
   if (initialized.instant) return toUploadReceipt(initialized);
-  await appApi.uploadResumableChunk({
+  const chunkPayload = {
     uploadId: initialized.uploadId,
     chunkIndex: 0,
     chunkMd5: fileMd5,
-    filePath: file.filePath,
-  }, { requestController });
+  };
+  if (file.browserFile) {
+    await appApi.uploadBrowserResumableChunk(chunkPayload, file.browserFile, { requestController });
+  } else {
+    await appApi.uploadResumableChunk({ ...chunkPayload, filePath: file.filePath }, { requestController });
+  }
   const completed = await appApi.completeResumableUpload({
     uploadId: initialized.uploadId,
     fileName: file.fileName,