时间戳

首页 > 解决方案 > Firebase存储更改名称时无法移动/上传文件，反应js，redux

reactjs - Firebase存储更改名称时无法移动/上传文件，反应js，redux

问题描述

我正在尝试将firebase存储中已经存在的文件重新上传/移动到具有不同文件夹的同一firebase存储中的另一个路径并使用redux-actions更改其名称，因此文件已上传但已损坏=>这意味着当我尝试打开它时，它打开时没有数据/图片和图片的大小9B 代码：

// upload the same file with new path and remove the old file
  let uploadAndDeletePromises = fileArr.map(
                                (fileData, index) =>
                                    storageRef
                                 // newpaths=folderName/FolderWithIdName/fileName__docId.png
                                        .child(newFilesPaths[index])
                                        .put(
                                            // filesToUpload data showed in the pictures below
                                            filesToUpload[index],
                                            // metadata={customMetadata: 
                                            // {uplaoderId:"",PrId:""}
                                            metadata[index]
                                        )
                                        .then(() =>
                                       //remove old path
                                            storageRef
                            // fileData.path -> the old path 
                            // FolderName/folderWithIdName/fileName.png
                                                .child(fileData.path)
                                                .delete()
                                        )
                            );
                            return Promise.all(uploadAndDeletePromises);

原始结果的结果filesToUpload效果很好，这些是我第一次上传的时候：

原始文件的对象

结果来自filesToUpload我想从firebase存储重新上传到firestore存储中的另一条路径的结果，这些是我试图重新上传到不同路径的时候：

在此处输入图像描述

任何人都经历过使用 react js 操作、firebase 存储而不是 node js 处理/移动文件从一个路径到另一个路径并更改其名称。

标签： reactjsfirebase

解决方案

移动文件的函数位于服务器端库中。如果要在客户端中移动文件，则必须执行以下步骤：

1.下载文件

2.上传文件到新位置

3.删除之前的文件（如果需要）

您似乎知道如何上传新文件并删除前一个文件，但在下载前一个文件时遇到问题（这就是上传 9B 文件的原因）。

根据文档，您可以像这样下载文件

storageRef.child('path/to/file').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for the file

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    // insert upload and delete code here
    };
    xhr.open('GET', url);
    xhr.send();
  })
  .catch((error) => {
    // Handle any errors
  });

推荐阅读