如何从 PWA 访问图片库答案

【问题标题】：How do I access the image gallery from a PWA如何从 PWA 访问图片库
【发布时间】：2021-08-20 02:10:21
【问题描述】：

我需要知道如何从 PWA 访问图片库。目前，PWA 将允许我拍照并将其上传到移动设备上，但它不允许我访问图片库和选择图片。在实际桌面上，我可以访问图片库，但不能通过实际设备访问...我只能访问相机拍照。

到目前为止，我已经考虑尝试将我的浏览器设置为允许访问图片库，但我在我的 Android 手机上的 Chrome 浏览器上没有看到设置。

代码如下：

  uploadFromFile(event, photoName: string) {

    const files = event.target.files;
    console.log('Uploading', files);
    const file = new Blob([files[0]], { type: 'image/jpeg' });

    console.log('file', file);
    const { type } = file;

    this.imageService.uploadImage(file, photoName, this.currentUser.uid)
    .then((url) => {
      this.photo0 = url;
      console.log('url edit prof', url);
    }).catch((error) => {
      alert(error.message);
    });
  }

 #capture::file-selector-button {
    display: none;
  }
  
  #capture {
    color: transparent;
  }
  
  #capture::before {
    content: url("../../../assets/image/SpaghettiPlus2.png");
    padding: 140px;
    align-items: center;
  }

        &lt;input type="file" id="capture" accept="image" capture (change)="uploadFromFile($event, 'photo0')" /&gt;

花了一段时间才找到这种在 PWA 中上传图片的方法。使用文件选择器的输入是我能在网上找到的允许 PWA 访问图片的唯一解决方案。

所以现在我只想能够访问设备上的照片库以上传照片。

【问题讨论】：

标签： html typescript ionic-framework progressive-web-apps angular-pwa

【解决方案1】：

问题在于capture 属性。

According to MDN:

capture 以前是一个布尔属性，如果存在，则请求使用设备的媒体捕获设备（如相机或麦克风）而不是请求文件输入。

另外，accept 属性的值似乎是错误的 (according to MDN)。如果它不起作用，请尝试 accept="image/*"。

【讨论】：