异步上传多个文件并在firebase存储问题中获取它们的url

Question

所以基本上我的问题在于标题。我有一张图片，而不是我有多个文件上传输入。我想将它们添加到 Firebase 存储中。我这样做了，它工作正常，当我想获取那些下载网址时问题就来了。在这种情况下，获取多个文件的 url 可以正常工作，当我想将它传递给这个单独的图像文件时，它最终会为空。顺便说一句，我正在使用 vue.js。所以这是我使用的方法的代码，所有的输入都很好。

methods:{
   async uploadImageFile() {
     var slugify = require('slugify')
     let imageName = this.$refs.image.files[0].name.split(".")[0]
     let ext = this.$refs.image.files[0]['name'].split(".")[1]
     this.blog.image = slugify(imageName)
     const {canvas} = this.$refs.cropper.getResult();
     if (canvas) {
       canvas.toBlob( blob => {
         let uploadTask = storageRef.child('blogs/' + this.blog.image +"-"+ moment().unix()+ "." +ext)
         try {
           uploadTask.put(blob)
           let downloadURL = uploadTask.getDownloadURL()
           this.blog.imageUrl = downloadURL
         }
         catch (error){
           console.log(error)
         }
       });
     }
   },
   save() {
     let slugify = require("slugify")
     this.blog.slug = slugify(this.blog.title)
     this.blog.user = usersCollection.doc(this.$store.state.userProfile.uid)
     this.blog.active = false
     this.blog.created = firebase.firestore.Timestamp.fromDate(new Date())
     blogsCollection.add(this.blog).then(() => {
       router.push('/admin/blogs');
     }).catch((error) => {
       console.error("Error adding document: ", error);
     });
   },
   async saveFiles(){
     await this.uploadImageFile()
     for(const fileIndex in this.files){
       let timestamp = new Date()
       let fileObject = this.files[fileIndex]
       let fileNameName = fileObject.name
       let ext = fileObject.name.split(".")[1]
       try {
         let uploadTask = storageRef.child('blogs/' + fileNameName.split(".")[0] + "-" + timestamp.getTime().toString() + "." + ext)
         await uploadTask.put(fileObject)
         let downloadURL = await uploadTask.getDownloadURL()
         this.blog.files.push({fileName:fileNameName,
           fileURL:downloadURL})
       } catch (error){
         console.log(error)
       }
     }
     this.save()
   }
}

我为 saveFiles() 函数设置了@click 方法..

Answer 1

假设您将firebase 导入为fb

试试这样的：

let uploadTask = storageRef.child('blogs/' + fileNameName.split(".")[0] + "-" + timestamp.getTime().toString() + "." + ext)
await uploadTask.put(fileObject)    
fb.UploadTaskSnapshot taskSnapshot = await uploadTask.future;
Uri downloadUrl = await taskSnapshot.ref.getDownloadURL();
url1 = downloadUrl.toString();

url1 将是您的下载地址字符串

Answer 2

好的，所以我在发布问题 2 小时后想通了，但忘记检查任何可能的答案。所以这里的交易是这里发生了大量的异步函数。所以对我来说最好的事情是创建这种功能链。首先做save​​Files，然后uploadImage，然后Save。一种可能的解决方法是在 uploadImage 函数中，我在其中选择裁剪器的内容并将其转换为 blob，以便我可以将其上传到存储，在那里我可以调用 async 并等待 blob 完成上传，以便我可以相应地获取图像的 url。我将发布编辑后的代码，它可以工作并做我想做的事情。

    async saveFiles(){
      if(!this.files){
        this.uploadImageFile()
        return
      }else {
        let slugify = require("slugify")
        for (const fileIndex in this.files) {
          let timestamp = new Date()
          let fileObject = this.files[fileIndex]
          let ext = fileObject.name.split(".")[1]
          let fileNameName = slugify(fileObject.name.split(".")[0]) + "-" + 
    timestamp.getTime().toString() + "." + ext
          try {
            let uploadTask = storageRef.child('blogs/' + fileNameName)
            await uploadTask.put(fileObject)
            let downloadURL = await uploadTask.getDownloadURL()
            this.blog.files.push({
              fileName: fileNameName,
              fileURL: downloadURL
            })
          } catch (error) {
            console.log(error)
          }
        }
        //here we call the uploadImageFile
        this.uploadImageFile() 
      }
    },
    //then we have the uploadImageFile func
    uploadImageFile() {
      var slugify = require('slugify')
      let imageName = this.$refs.image.files[0].name.split(".")[0]
      let ext = this.$refs.image.files[0]['name'].split(".")[1]
      this.blog.image = slugify(imageName)+"-"+moment().unix() + "." + ext
      const {canvas} = this.$refs.cropper.getResult();
      if (canvas) {
        canvas.toBlob(blob => {
          let uploadTask = storageRef.child('blogs/' + this.blog.image ).put(blob)
          uploadTask.on('state_changed',
              (snapshot) => {
                switch (snapshot.state) {
                  case firebase.storage.TaskState.PAUSED: // or 'paused'
                    break;
                  case firebase.storage.TaskState.RUNNING: // or 'running'
                    break;
                }
              },
              (error) => {
                console.log(error);
              },
              () => {
                this.save(uploadTask)
              }
          );
        }, 'image/jpeg');
      }
      this.save()
    },
    //then we have the save
    save(uploadTask){
      let task = uploadTask.snapshot.ref.getDownloadURL();
      task.then((url)=> {
        this.blog.imageUrl = url
        let slugify = require("slugify")
        this.blog.slug = slugify(this.blog.title)
        this.blog.user = usersCollection.doc(this.$store.state.userProfile.uid)
        this.blog.active = false
        this.blog.created = firebase.firestore.Timestamp.fromDate(new Date())
        this.blog.type = this.selected
        blogsCollection.add(this.blog).then(() => {
          router.push('/admin/blogs');
        }).catch((error) => {
          console.error("Error adding document: ", error);
        });
      })
    }

现在这个功能块正在做我想要的。上传文件，然后获取该文件的下载网址。以前的代码正在执行并且没有等待 url，因为同时发生了很多事情，并且它不等待 url 响应。干杯！