React环境下上传图片至Firebase前的尺寸调整实现异常问题

• 时序逻辑错配：Compressing.imageFileResizer 是带异步回调的方法，你把上传逻辑写在了回调函数外面，代码执行时会先跑上传逻辑，再触发图片压缩的回调，此时上传用到的imageUri根本没有拿到压缩后的有效内容，相当于直接上传了空值
• 文件类型识别失效：你手动把base64串的格式前缀删掉，直接把纯base64字符串传给Firebase的上传方法，Firebase没有办法从纯字符串里判断文件类型，就会默认把文件标记为application/octet-stream，前端拿到这种类型的文件时，不会按图片格式解析，自然没法正常展示
• 输出模式选择不合理：依赖本身支持直接输出带正确MIME类型的Blob对象，你选择了base64输出模式还手动拆格式头，相当于人为切断了文件类型的传递链路

1. 代码逻辑挪位：把上传的全流程逻辑放进imageFileResizer的回调内部，确保拿到压缩完成的图片内容后，再启动上传流程，不要跨回调读取异步赋值的变量
2. 切换输出格式：把imageFileResizer最后一个参数从base64改成blob，直接拿到自带正确类型标识的图片Blob文件，省掉手动处理base64的环节
3. 显式声明上传元数据：调用put方法时，第二个参数传入文件元数据，明确声明contentType为对应图片格式，强制Firebase按图片类型存储文件，不会再默认识别成二进制流
4. 格式对齐校验：处理时指定的图片格式（比如示例里的png），要和元数据里的contentType保持一致，不要出现格式不匹配的问题

const onChangeHandler = async (event) => {
  const imageFile = event.target.files[0];
  // 增加空值校验，避免无文件时执行后续逻辑
  if (!imageFile) return;

  Compressing.imageFileResizer(
    imageFile, // 输入的原始文件
    480, // 目标宽度
    480, // 目标高度
    'png', // 处理后的图片格式
    70, // 压缩质量
    0, // 旋转角度
    // 把上传逻辑全部移进回调内部，确保拿到处理结果后再执行
    async (resizedBlob) => {
      // 上传时显式传入文件元数据，明确文件类型
      const uploadTask = storage.ref(`images/${imageFile.name}`).put(
        resizedBlob,
        { contentType: 'image/png' }
      );

      uploadTask.on(
        'state_changed',
        (snapshot) => {
          // 可在此处补充上传进度计算逻辑
        },
        (error) => {
          console.log('上传失败:', error);
        },
        () => {
          storage.ref('images')
            .child(imageFile.name)
            .getDownloadURL()
            .then((url) => {
              console.log('上传完成，图片访问地址:', url);
            });
        }
      );
    },
    // 把输出格式从base64切换为blob
    'blob'
  );

如果因为业务需求必须使用base64输出模式，不要直接把剥离前缀的纯base64字符串传给上传方法，需要先把完整的带格式前缀的base64串转成对应格式的Blob再执行上传：

// 拿到完整的base64 URI后（不要剥离前缀）
const imageBlob = await fetch(uri).then(res => res.blob());
// 后续上传逻辑和上述代码一致，显式传入contentType元数据即可

内容的提问来源于stack exchange，提问作者Ranjan Raj Shrestha