React+Redux环境下Firebase Storage重命名移动文件损坏如何解决？

问题原因 #

你执行移动操作时调用put方法传入的filesToUpload[index]不是合法的Blob/File类型对象，大概率是误将文件路径字符串、Storage引用对象这类非二进制内容作为文件数据上传，才会出现最终文件只有几字节、无法正常打开的问题。

纯前端实现Firebase Storage文件移动/重命名方案 #

不需要依赖Node.js服务端，仅用客户端JS SDK即可完成操作，核心逻辑是先读取原文件的二进制内容，再上传到新路径，最后删除原文件，代码如下：

// 封装移动文件方法
const moveStorageFile = async (oldPath, newPath, metadata = {}) => {
  const oldFileRef = storageRef.child(oldPath);
  // 第一步：获取原文件的二进制Blob数据
  const fileBlob = await oldFileRef.getBlob();
  // 第二步：上传Blob到新路径
  await storageRef.child(newPath).put(fileBlob, metadata);
  // 第三步：删除原路径文件
  await oldFileRef.delete();
}

// 批量移动调用示例
let uploadAndDeletePromises = fileArr.map(async (fileData, index) => {
  return moveStorageFile(fileData.path, newFilesPaths[index], metadata[index])
});
return Promise.all(uploadAndDeletePromises);

如果你使用的是v8及以下版本的Firebase JS SDK，没有getBlob方法，可以用下面的方式获取Blob：

const downloadUrl = await oldFileRef.getDownloadURL();
const res = await fetch(downloadUrl);
const fileBlob = await res.blob();

注意事项 #

• 如果要移动的文件体积较大，建议增加进度监听和错误捕获逻辑，避免网络波动导致操作失败
• 操作前建议先判断原文件是否存在、当前账号是否有对应路径的读写权限，避免出现权限类报错
• 不要直接将文件路径、引用对象这类非二进制数据传入put方法，必须传入Blob/File/ArrayBuffer这类合法的二进制数据类型

内容的提问来源于stack exchange，提问作者Salem Nusair