初始化移动端提交

sheep/components/s-uploader/choose-and-upload-file.js

@@ -0,0 +1,304 @@
+'use strict';
+import FileApi from '@/sheep/api/infra/file';
+
+const ERR_MSG_OK = 'chooseAndUploadFile:ok';
+const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
+
+function chooseImage(opts) {
+  const {
+    count,
+    sizeType = ['original', 'compressed'],
+    sourceType = ['album', 'camera'],
+    extension,
+  } = opts;
+  return new Promise((resolve, reject) => {
+    uni.chooseImage({
+      count,
+      sizeType,
+      sourceType,
+      extension,
+      success(res) {
+        resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function chooseVideo(opts) {
+  const { camera, compressed, maxDuration, sourceType = ['album', 'camera'], extension } = opts;
+  return new Promise((resolve, reject) => {
+    uni.chooseVideo({
+      camera,
+      compressed,
+      maxDuration,
+      sourceType,
+      extension,
+      success(res) {
+        const { tempFilePath, duration, size, height, width } = res;
+        resolve(
+          normalizeChooseAndUploadFileRes(
+            {
+              errMsg: 'chooseVideo:ok',
+              tempFilePaths: [tempFilePath],
+              tempFiles: [
+                {
+                  name: (res.tempFile && res.tempFile.name) || '',
+                  path: tempFilePath,
+                  size,
+                  type: (res.tempFile && res.tempFile.type) || '',
+                  width,
+                  height,
+                  duration,
+                  fileType: 'video',
+                  cloudPath: '',
+                },
+              ],
+            },
+            'video',
+          ),
+        );
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function chooseAll(opts) {
+  const { count, extension } = opts;
+  return new Promise((resolve, reject) => {
+    let chooseFile = uni.chooseFile;
+    if (typeof wx !== 'undefined' && typeof wx.chooseMessageFile === 'function') {
+      chooseFile = wx.chooseMessageFile;
+    }
+    if (typeof chooseFile !== 'function') {
+      return reject({
+        errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
+      });
+    }
+    chooseFile({
+      type: 'all',
+      count,
+      extension,
+      success(res) {
+        resolve(normalizeChooseAndUploadFileRes(res));
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function normalizeChooseAndUploadFileRes(res, fileType) {
+  res.tempFiles.forEach((item, index) => {
+    if (!item.name) {
+      item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
+    }
+    if (fileType) {
+      item.fileType = fileType;
+    }
+    item.cloudPath = Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
+  });
+  if (!res.tempFilePaths) {
+    res.tempFilePaths = res.tempFiles.map((file) => file.path);
+  }
+  return res;
+}
+
+async function readFile(uniFile) {
+  // 微信小程序
+  if (uni.getFileSystemManager) {
+    const fs = uni.getFileSystemManager();
+    return fs.readFileSync(uniFile.path);
+  }
+  // H5 等
+  return uniFile.arrayBuffer();
+}
+
+function uploadCloudFiles(files, max = 5, onUploadProgress) {
+  files = JSON.parse(JSON.stringify(files));
+  const len = files.length;
+  let count = 0;
+  let self = this;
+  return new Promise((resolve) => {
+    while (count < max) {
+      next();
+    }
+
+    function next() {
+      let cur = count++;
+      if (cur >= len) {
+        !files.find((item) => !item.url && !item.errMsg) && resolve(files);
+        return;
+      }
+      const fileItem = files[cur];
+      const index = self.files.findIndex((v) => v.uuid === fileItem.uuid);
+      fileItem.url = '';
+      delete fileItem.errMsg;
+
+      uniCloud
+        .uploadFile({
+          filePath: fileItem.path,
+          cloudPath: fileItem.cloudPath,
+          fileType: fileItem.fileType,
+          onUploadProgress: (res) => {
+            res.index = index;
+            onUploadProgress && onUploadProgress(res);
+          },
+        })
+        .then((res) => {
+          fileItem.url = res.fileID;
+          fileItem.index = index;
+          if (cur < len) {
+            next();
+          }
+        })
+        .catch((res) => {
+          fileItem.errMsg = res.errMsg || res.message;
+          fileItem.index = index;
+          if (cur < len) {
+            next();
+          }
+        });
+    }
+  });
+}
+
+function uploadFilesFromPath(path, directory = '') {
+  // 目的：用于微信小程序，选择图片时，只有 path
+  return uploadFiles(
+    Promise.resolve({
+      tempFiles: [
+        {
+          path,
+          type: 'image/jpeg',
+          name: path.includes('/') ? path.substring(path.lastIndexOf('/') + 1) : path,
+        },
+      ],
+    }),
+    {
+      directory,
+    },
+  );
+}
+
+async function uploadFiles(choosePromise, { onChooseFile, onUploadProgress, directory }) {
+  // 获取选择的文件
+  const res = await choosePromise;
+  // 处理文件选择回调
+  let files = res.tempFiles || [];
+  if (onChooseFile) {
+    const customChooseRes = onChooseFile(res);
+    if (typeof customChooseRes !== 'undefined') {
+      files = await Promise.resolve(customChooseRes);
+      if (typeof files === 'undefined') {
+        files = res.tempFiles || []; // Fallback
+      }
+    }
+  }
+
+  // 如果是前端直连上传
+  if (UPLOAD_TYPE.CLIENT === import.meta.env.SHOPRO_UPLOAD_TYPE) {
+    // 为上传创建一组 Promise
+    const uploadPromises = files.map(async (file) => {
+      try {
+        // 1.1 获取文件预签名地址
+        const { data: presignedInfo } = await FileApi.getFilePresignedUrl(file.name, directory);
+        // 1.2 获取二进制文件对象
+        const fileBuffer = await readFile(file);
+
+        // 返回上传的 Promise
+        return new Promise((resolve, reject) => {
+          // 1.3. 上传文件到 S3
+          uni.request({
+            url: presignedInfo.uploadUrl,
+            method: 'PUT',
+            header: {
+              'Content-Type': file.type,
+            },
+            data: fileBuffer,
+            success: (res) => {
+              // 1.4. 记录文件信息到后端（异步）
+              createFile(presignedInfo, file);
+              // 1.5. 重新赋值
+              file.url = presignedInfo.url;
+              resolve(file);
+            },
+            fail: (err) => {
+              reject(err);
+            },
+          });
+        });
+      } catch (error) {
+        console.error('上传失败：', error);
+        throw error;
+      }
+    });
+
+    // 等待所有上传完成
+    return await Promise.all(uploadPromises); // 返回已上传的文件列表
+  } else {
+    // 后端上传
+    for (let file of files) {
+      const { data } = await FileApi.uploadFile(file.path, directory);
+      file.url = data;
+    }
+
+    return files;
+  }
+}
+
+function chooseAndUploadFile(
+  opts = {
+    type: 'all',
+    directory: undefined,
+  },
+) {
+  if (opts.type === 'image') {
+    return uploadFiles(chooseImage(opts), opts);
+  } else if (opts.type === 'video') {
+    return uploadFiles(chooseVideo(opts), opts);
+  }
+  return uploadFiles(chooseAll(opts), opts);
+}
+
+/**
+ * 创建文件信息
+ * @param vo 文件预签名信息
+ * @param file 文件
+ */
+function createFile(vo, file) {
+  const fileVo = {
+    configId: vo.configId,
+    url: vo.url,
+    path: vo.path,
+    name: file.name,
+    type: file.fileType,
+    size: file.size,
+  };
+  FileApi.createFile(fileVo);
+  return fileVo;
+}
+
+/**
+ * 上传类型
+ */
+const UPLOAD_TYPE = {
+  // 客户端直接上传（只支持S3服务）
+  CLIENT: 'client',
+  // 客户端发送到后端上传
+  SERVER: 'server',
+};
+
+export { chooseAndUploadFile, uploadCloudFiles, uploadFilesFromPath };