Question

我有一个React表单，用户可以在其中上传多个文件。这些存储在for (const auto & val : a_val)

中

fileList

这将调用我的帮助程序功能，该功能会将文件上传到Firebase

async function uploadFiles(id) {
    try {
        const meta = await storageUploadFile(fileList, id);
        console.log(meta);
    } catch (e) {
        console.log(e);
    }
}

我想要的是调用uploadFiles，获取所有项目的总文件大小，然后显示总体进度。

此刻，我的代码仅在完成时返回数组中的文件状态

export const storageUploadFile = function(files, id) {
    const user = firebase.auth().currentUser.uid;
    return Promise.all(
        files.map((file) => {
            return storage.child(`designs/${user}/${id}/${file.name}`).put(file)
        })
    )
};

Answer 1

这是我的方法：

import Deferred from 'es6-deferred';

export const storageUploadFile = function(files, id) {
  const user = firebase.auth().currentUser.uid;
  // To track the remaining files
  let itemsCount = files.length;
  // To store our files refs
  const thumbRef = [];
  // Our main tasks
  const tumbUploadTask = [];
  // This will store our primses
  const thumbCompleter = [];
  for (let i = 0; i < files.length; i += 1) {
    thumbRef[i] = storage.ref(`designs/${user}/${id}/${file.name}`);
    tumbUploadTask[i] = thumbRef[i].put(files[i]);
    thumbCompleter[i] = new Deferred();
    tumbUploadTask[i].on('state_changed',
      (snap) => {
        // Here you can check the progress
        console.log(i, (snap.bytesTransferred / snap.totalBytes) * 100);
      },
      (error) => {
        thumbCompleter[i].reject(error);
      }, () => {
        const url = tumbUploadTask[i].snapshot.metadata.downloadURLs[0];
        itemsCount -= 1;
        console.log(`Items left: ${itemsCount}`)
        thumbCompleter[i].resolve(url);
      });
  }
  return Promise.all(thumbCompleter).then((urls) => {
    // Here we can see our files urls
    console.log(urls);
  });
};

希望有帮助。

Firebase上传多个文件并获取状态

1 个答案: