如何使用具有离子和角度的照片相机在firebase中同时保存多个图像

Posted 2023-03-22

【中文标题】如何使用具有离子和角度的照片相机在firebase中同时保存多个图像

【英文标题】：How to save several images at the same time in firebase using the photo camera with ionic and angular

【发布时间】：2021-04-13 04:50:58

【问题描述】：

如何将多张图片保存到存储空间？这段代码，完成的是，使用相机，当你拍照时创建一个图像排列，点击上传只上传一张图片到firestorage，但我不知道如何上传多张图片，有什么想法吗？

完整详细的代码：

public imagesArray: Array<any> = new Array<any>();
captureDataUrl: string;
alertCtrl: AlertController;

capture() 
  const options: CameraOptions = 
    quality: 50,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
  ;

  this.camera.getPicture(options).then(
    imageData => 
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:

      this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
      this.imagesArray.push(this.captureDataUrl);
    ,
    err => 
      // Handle error
    ,
  );
 // End of capture camera

upload() 
  let storageRef = firebase.storage().ref();
  // Create a timestamp as filename

  const filename = Math.floor(Date.now() / 1000);

  // Create a reference to 'images/todays-date.jpg'

  const imageRef = storageRef.child(`images/$filename.jpg`);

  imageRef
    .putString(this.captureDataUrl, firebase.storage.StringFormat.DATA_URL)
    .then(snapshot => 
      // Do something here when the data is succesfully uploaded!
    );

the html component:

<ng-container *ngFor="let i of imagesArray;">
       <img src='i' /> 
  </ng-container>

 <ion-button ion-button (click)="capture()"> take a photo!</ion-button>
 <ion-button ion-button (click)="upload()"  >upload firebase!</ion-button>

我想同时上传两张或多张照片，或者更确切地说是多张照片，代码的作用是在拍摄照片时将其保存在 Firebase 中，但如果我拍摄两张照片，则只保存一张。

【问题讨论】：

问题不清楚。究竟是什么问题？你想上传你刚刚拍了2次的照片吗？如果第一张照片是从相机拍摄的，那么第二张照片的来源是什么？

我想同时上传两张或多张照片，或者更确切地说是多张，代码的作用是拍照时将其保存在firebase中，但如果我拍两张照片只保存一个

尝试使用Date.now(); 而不是Math.floor(Date.now() / 1000);。也许有名字冲突

不行，就是每次点击上传，都是上传单张图片

如何同时拍两张照片？

【参考方案1】：

我假设：

应用中某处有一个UPLOAD 按钮。 当您单击它时，它会调用upload() 方法。

如果是这样，当然只上传一张图片。在您编写的capture() 方法中：

// You save the data of the LAST captured image
this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
// You then push it to an array containing all images (that's good!)
this.imagesArray.push(this.captureDataUrl);

在upload() 你有：

// You pass `this.captureDataUrl`, i.e. the LAST captured image! That's not what you want!
imageRef.putString(this.captureDataUrl, firebase.storage.StringFormat.DATA_URL)

相反，您应该迭代 this.imagesArray，如下所示：

upload() 
  let storageRef = firebase.storage().ref();

  Promise.all(
    // Go over ALL captured images
    // UPDATE 1
    this.imagesArray.map((imageUrl, imageIndex) => 
      // Create a timestamp as filename
      // UPDATE 1
      const filename = `$Date.now()-$imageIndex`;

      // Create a reference to 'images/todays-date.jpg'
      const imageRef = storageRef.child(`images/$filename.jpg`);

      // Upload that particular image and return the upload Promise
      return imageRef
        .putString(imageUrl, firebase.storage.StringFormat.DATA_URL)
        .then(snapshot => 
          // Do something here when the data is succesfully uploaded!
        );
    ),
  ).then(
    () => 
      console.log('All images uploaded!');
    ,
    err => 
      console.error('Some images failed to upload...', err);
    ,
  );

【讨论】：

只保存一张图片，还是很感激的

啊，对了，可能还有文件名冲突。我已经更新了代码（更新用 cmets UPDATE 1 表示），检查一下。