Ionic 如何上传来自爱奥尼亚相机的图像到火力点？

c86crjj0 于 2023-03-16 发布在 Ionic

关注(0)|答案(2)|浏览(124)

我已经设法采取了使用离子相机API的照片：

async pickImage(sourceType: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
      source: sourceType,
    });
    console.log(image);
  }

结果是这样的

我也发现使用angular fire存储上传，但我不知道如何连接这两个。我真的不明白什么是介于两者之间的格式，什么格式我应该问相机API和什么格式我应该提供给AngularFireStorage API。
我试过这个：

const filePath = 'name-your-file-path-here';
const ref = this.storage.ref(filePath);
const task = ref.put(image.webPath);
task
  .snapshotChanges()
  .pipe(finalize(() => console.log(ref.getDownloadURL())))
  .subscribe();

但我得到这个错误：

ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/invalid-argument","message_":"Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.","serverResponse_":null,"name_":"FirebaseError"}

你的灯将会非常感谢：）

ionic-framework

来源：https://stackoverflow.com/questions/66143153/how-to-upload-an-image-coming-from-the-ionics-camera-to-firebase

2条答案

按热度按时间

lmyy7pcs1#

那个“webpath”不是一个文件或者blob，你需要在调用put之前转换它。在ionic网站上有一个如何转换它的例子
https://ionicframework.com/docs/angular/your-first-app/3-saving-photos

private async readAsBase64(cameraPhoto: CameraPhoto) {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(cameraPhoto.webPath!);
  const blob = await response.blob();

  return await this.convertBlobToBase64(blob) as string;  
}

convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
  const reader = new FileReader;
  reader.onerror = reject;
  reader.onload = () => {
      resolve(reader.result);
  };
  reader.readAsDataURL(blob);
});

赞(0）回复(0）举报 2023-03-16

8dtrkrch2#

这是我的示例代码，运行良好，希望对您有所帮助

ambilpoto2(){
    const image =  Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    });
    image.then((res:any)=>{
      this.gambar = res.webPath;
      this.gambarnya.nativeElement.src = this.gambar;
      this.blob=this.readAsBase64(this.gambar);
      console.log(this.blob); 
    })
  }

  private async readAsBase64(cameraPhoto: any) {
    const response = await fetch(cameraPhoto);
    const blob = await response.blob();
    return await this.convertBlobToBase64(blob) as string;  
  }
  
  convertBlobToBase64 = (blob: Blob) => 
    new Promise(
      (resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
          resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    });
  }

和这里我的代码为php服务器
具有DataUrl结果类型的

//get base64 of image from client end
    $imageBase64 = $post['poto'];
    if ($imageBase64!='') {
        //function call
        $unique_name = uploadbase64image($imageBase64);
    }
    function uploadbase64image($base64) {
        $direktori = "domain/api/upload/"; 
        $imgname= $direktori.date("Y-m-d-H-i-s") . ".png";
        $new_image_url ="upload/". $imgname;
        $base641 = 'data:image/png;base64,' . $base64;
        $base642 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
        file_put_contents($new_image_url, $base642);
        return $uniname;
    }

ambilpoto(){
    const image =  Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.DataUrl
    });
    image.then((res:any)=>{
      this.gambar = res.dataUrl;this.gambarnya.nativeElement.src = this.gambar;
      console.log(this.gambar); 
    })
    
  }

enter code here

赞(0）回复(0）举报 2023-03-16

我来回答

Ionic 如何上传来自爱奥尼亚相机的图像到火力点？

2条答案

相关问题

热门标签

最新问答