Angular 2-12 手机摄像头捕捉

Question

我正在寻找一种使用移动相机拍摄照片并将其上传到 Angular 2+ 中的服务器的方法。有可能做到吗？

我可以找到很多上传文件的教程，但连一个教程如何访问手机相机和使用拍摄的照片的教程都没有。

Answer 1

好的，所以我终于得到了我需要的东西。在 .html 文件中:

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" (change)="onFileSelected($event)">
<button type="button" (click)="onUpload()">Upload File</button>

在 .ts 文件中:

export class AppComponent {
  title = 'app';
  selectedFile = null;

  onFileSelected(event)
  {
    this.selectedFile = event.target.files[0];
  }

  onUpload()
  {
    console.log(this.selectedFile); // You can use FormData upload to backend server
  }
}

将“selectedFile”变量用于您需要对照片执行的任何操作。

注意:它只适用于 iOS6+，我已经在 android 上检查过，它运行良好。