ReactJS项目上传文件到Firebase前如何对图片进行尺寸调整？

DevOps 小满

2026-10-3

问题根因

原resizeFile方法中对异步map直接使用await不会等待所有异步任务完成，最终得到的是Promise数组而非处理后的文件集合
当前输出的base64 Data URI是文本格式，无法直接传入Firebase Storage的上传接口，需要转换为标准File/Blob对象，转换后的对象就是符合要求的图片格式，不需要额外做其他格式转换

实现代码

1. 新增base64转File工具方法

const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type:mime});
}

2. 修正resizeFile方法

export const resizeFile = async (imageFiles) => {
  // 用Promise.all等待所有图片压缩处理完成
  return await Promise.all(imageFiles.map(async (file) => {
    const base64URI = await new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        "JPEG",
        100,
        0,
        (uri) => {
          resolve(uri);
        },
        "base64"
      );
    });
    // 把base64转成File对象，沿用原文件的文件名
    const resizedFile = dataURLtoFile(base64URI, file.fName);
    return resizedFile;
  }))
}

3. Firebase Storage上传示例

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

const uploadResizedImages = async (imageFiles) => {
  const resizedFiles = await resizeFile(imageFiles);
  const storage = getStorage();
  // 遍历所有处理后的文件上传
  const uploadPromises = resizedFiles.map(async (file) => {
    const storageRef = ref(storage, `images/${file.name}`);
    // 直接传入File对象上传
    const snapshot = await uploadBytes(storageRef, file);
    return getDownloadURL(snapshot.ref);
  });
  // 等待所有上传完成，返回所有图片的访问链接
  return await Promise.all(uploadPromises);
}