RemixJS 2 處理從用戶端來的資料

handle-request-data.ts 包含了幾個處理要求端來的資料，後來改用 qs 套件比較符合 expressjs 的風格。 其中處理上傳檔案的部份為存成檔案，目前建議存到雲端服務，例如 AWS S3。 這些函式同樣可以使用在 NextJS app router 上。

// *** handle-request-data.ts
import qs from "qs";
import fs from "node:fs/promises";
import { v4 as uuidV4 } from "uuid";

export const getQueryStringObject:any = (request: Request) => {
  const q = request.url.indexOf("?");
  if (q < 0) {
    return {};
  } else {
    return qs.parse(request.url.slice(q+1));
  }
  // *** 以下為使用 Object 的版本
  // const url = new URL(request.url);
  // return Object.fromEntries(url.searchParams);
};

export const getBodyObject = async (request: Request) => {
  const contentType = request.headers.get("Content-Type")?.split(";")[0];

  switch (contentType) {
    case "multipart/form-data":
      const formData:any = await request.formData();
      return qs.parse(new URLSearchParams(formData).toString());
      // *** 以下為使用 Object 的版本
      // return Object.fromEntries(formData);

    case "application/x-www-form-urlencoded":
      const txt = await request.text();
      return qs.parse(txt);
      // *** 以下為使用 Object 的版本
      // const usp = new URLSearchParams(txt);
      // return Object.fromEntries(usp);

    case "application/json":
      const json = await request.json();
      return json;
  }
};

type FileDataType = {
  size: number;
  type: string;
  lastModified: number;
  originalName: string;
  filename: string;
  path: string;
};
type MultipartDataResultType = {
  fields: { [index: string]: string | string[] };
  files: { [index: string]: FileDataType | FileDataType[] };
  error: any;
};

// *** 處理檔案上傳
export async function getMultipartData(
  request: Request,
  acceptedMimeTypes = ["image/jpeg", "image/png"], // 篩選類型設定
  useUuidFilename = true, // 使用隨機 uuid 為主檔名
  uploadDir = "./tmp" // 上傳的資料夾
) {
  let result: MultipartDataResultType = {
    fields: {},
    files: {},
    error: {},
  };
  const method = request.method.toUpperCase();

  let type = request.headers.get("Content-Type");
  if (!type) return result;
  type = type.split(";")[0]; // 取得 mimetype

  if (method !== "GET") {
    if (type === "multipart/form-data") {
      const formData = await request.formData();
      try {
        await fs.access(uploadDir, fs.constants.F_OK);
      } catch (ex) {
        // 建立上傳的資料夾
        await fs.mkdir(uploadDir, { recursive: true });
      }

      for (const [k, v] of formData.entries()) {
        console.log({ k, v });
        if (typeof v === "string") {
          // 處理文字欄位
          if (!result.fields[k]) {
            result.fields[k] = v;
          } else {
            if (result.fields[k] instanceof Array) {
              const strArray = result.fields[k] as string[];
              strArray.push(v);
            } else {
              const val = result.fields[k] as string;
              result.fields[k] = [val, v];
            }
          }
        } else if (v instanceof Blob) {
          // 處理檔案欄位
          result.files = result.files || {};
          const { size, type, name, lastModified } = v;

          if (acceptedMimeTypes.length) {
            if (!acceptedMimeTypes.includes(type)) {
              continue;
            }

            let filename = name;
            if (useUuidFilename) {
              let tmpName = name.toLowerCase();
              let mainName = uuidV4();
              let extName = "";
              if (tmpName.indexOf(".") !== -1) {
                const frs = tmpName.split(".");
                extName = "." + frs[frs.length - 1];
              }
              filename = mainName + extName;
            }
            const path = uploadDir + "/" + filename;
            const fileData: FileDataType = {
              size,
              type,
              lastModified,
              originalName: name,
              filename,
              path,
            };

            if (!result.files[k]) {
              result.files[k] = fileData;
            } else {
              if (result.files[k] instanceof Array) {
                const fdArray = result.files[k] as FileDataType[];
                fdArray.push(fileData);
              } else {
                const val = result.files[k] as FileDataType;
                result.files[k] = [val, fileData];
              }
            }
            await fs.writeFile(path, v.stream() as any);
          }
        }
      }
    }
  }
  return result;
}