Question

我有一个网站，用户可以在其中创建产品，然后可以向该产品添加许多文件，包括源文件和图像。

如果用户上传图像，则我有一个CF触发器，可生成预览图像并将其存储。

根据Firebase文档，我从客户端进行了所有这些操作，但是我开始发现一些缺陷，并且我不是唯一一个遇到这些问题的人。

我处理产品创建的方式是，用户为产品命名，并同时上传文件。提交时，我将执行以下操作：

async function onSubmit() {
  try {
     await createFirestoreDocument();
     await uploadFilesToBucket()
  } catch (e) {

  }
}

和我的uploadFilesToBucket函数如下：

export const storageUploadFile = function(files, id) {
    const user = firebase.auth().currentUser.uid;
    return Promise.all(
        files.map((file) => {
            const name = slugify(file.name);
            switch (getFileTypeOrExt(file)) {
                case "ai":
                case "psd":
                case "image/svg+xml":
                case "svg":
                case "eps":
                case "application/postscript":
                    return storage.child(`products/${user}/${id}/files/${name}`).put(file);
                default:
                    return storage.child(`products/${user}/${id}/images/${name}`).put(file);
            }
        })
    )
};

这是我遇到的许多问题：

用户连接速度慢

用户创建一个设计并提交他们的文件，但是上传非常缓慢，只需关闭浏览器即可。用户现在拥有一个产品，但是没有产品，或与之相关的一些文件。虽然不是一个大问题，但这并不是一个很好的用户体验。

将上传的文件和预览链接到设计

如果用户已成功上传了所有文件，则下一步是从我的uploadFiles函数获取响应，然后更新设计文档。如上所述，如果用户的连接速度很慢，并且在执行此操作之前就关闭了，那么现在存储中的文件已经被用户访问，因为它们不在设计文档中。

人们如何克服这些问题？

从客户端将大文件上传到Firebase存储

0 个答案: