Ionic/Firebase 图像选择器/裁剪和上传问题答案

【问题标题】：Ionic/Firebase image-picker/Crop and upload issueIonic/Firebase 图像选择器/裁剪和上传问题
【发布时间】：2019-12-20 17:16:39
【问题描述】：

我试图实现选择图像并裁剪它的功能。之后我想把它上传到firebase。由于某种原因，它根本不起作用，并且“readAsArrayBuffer”没有执行 .

我对此很陌生，所以我会很感激一些帮助:)

谢谢

这是我尝试过的：

“newPath”看起来像这样，例如：

  "file:///storage/emulated/0/Android/data/io.ionic.starter/cache/
  1565766305015-cropped.jpg?1565766307602"

“nameFile”看起来像这样：

  "1565766305015-cropped.jpg".

    constructor(private imagePicker: ImagePicker, private crop: Crop,
        private file: File) {
          let storageDb = firebase.storage();
          this.storageRef = storageDb.ref();
      }


    pickImage() {
      this.imagePicker.getPictures(this.imagePickerOptions).then((results) 
    => {
        // tslint:disable-next-line: prefer-for-of
        for (let i = 0; i < results.length; i++) {
          this.cropImage(results[i]);
        }
      }, (err) => {
        alert(err);
      });
    }  


    cropImage(imgPath) {
        this.crop.crop(imgPath, { quality: 50 })
          .then(
            newPath => {
              try {
                let n = newPath.lastIndexOf("/");
                let x = newPath.lastIndexOf("g");
                let nameFile = newPath.substring(n + 1, x + 1);
                this.file.readAsArrayBuffer(newPath, nameFile).then((res) => {
                  let blob = new Blob([res], { type: "image/jpeg" });
                  var uploadTask = this.storageRef.child('images/' + this.event.id).put(blob);
                  uploadTask.on('state_changed', (snapshot) => {
                    let url = uploadTask.snapshot.downloadURL;
                    this.croppedImagepath = url;
                  }, (error) => {
                    alert("error: " + error);
                  }, () => { 
                    alert("uploaded");
                    let url = uploadTask.snapshot.downloadURL;
                    this.croppedImagepath = url;
                  })
                })
              }
              catch (z) {
                alert('error beim erstellen des blobs' + z);
              }
            },
            error => {
              alert('Error cropping image' + error);
            }
          );
      }

【问题讨论】：

标签： javascript firebase ionic-framework file-upload ionic4

【解决方案1】：

好奇，你从哪里得到的 sn-p？实际上还有另一个问题出现了they are using the File class differently：

  readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], {
        type: file.type
      });
      formData.append('file', imgBlob, file.name);
      this.uploadImageData(formData);
    };
    reader.readAsArrayBuffer(file);
  }

【讨论】：