“ Firebase存储:在索引0处的put中的参数无效:预期的Blob或文件。”

时间:2018-12-24 03:33:18

标签: angular firebase ionic-framework

我正在使用Ionic 4拾取图像,裁剪图像,然后将其上传到Firebase存储中。但是我上传时遇到问题,因为它说我上传的文件不是blob类型的文件也不是文件。

对于我来说,我具有要上传的图像的本地路径。

我已将其转换为File:https://developer.mozilla.org/en-US/docs/Web/API/File类型,但firebase仍无法将其识别为File。

  press(){
    let options: ImagePickerOptions = {  
        //here Quality of images, defaults to 100  
        quality: 100,  
        //here Width of an Image  
        width: 640,  
        //here Height of an Image  
        height: 640,  
        /** Output type, defaults to 0 (FILE_URI). 

        * FILE_URI :0 (number) it returns a actual path for an image 

        */  
        outputType: 1, //0 is for image URI, 1 is for image base 64

        maximumImagesCount: 1//numbers  
        //while setting a number 15 we can load 15 images in one selection.  
    }; 

    this.imagePicker.getPictures({quality : 100, width: 640, height: 640, outputType: 0}).then((results) => {
      for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);

        this.crop.crop(results[i], {quality: 100, targetHeight: 640, targetWidth: 640})
        .then(
          newImage => {
            console.log('new image path is: ' + newImage),
            this.photoCroppedLocalUri = newImage;
            console.log(this.photoCroppedLocalUri);
            this.photoCroppedUri = this.webview.convertFileSrc(newImage);
            console.log('image path converted: ' + this.photoCroppedUri);

            this.assignFile().then(()=>{
              this.uploadFile(event);  
            })

          },
          error => console.error('Error cropping image', error)
        );
      }
    }, (err) => {
      console.log(err)
    });
  }

  assignFile(){ 
    return new Promise ((resolve, reject)=>{
      this.theFile = new File ([""], this.photoCroppedUri);
      resolve()
    })
  }

  uploadFile(event) {
    const file = this.theFile;
    const filePath = `photo/${this.authService.currentUserId}/photo01`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => {
          this.downloadURL = fileRef.getDownloadURL() ; 
          console.log(this.downloadURL)
        })
     )
    .subscribe()
  }

我希望有人能帮助我找出问题所在。非常感谢。

0 个答案:

没有答案