如何从 PWA 访问图片库

Question

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

到目前为止，我已经尝试将浏览器设置为允许访问图片库，但我在 android [=31] 的 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;
  }

        <input type="file" id="capture" accept="image" capture (change)="uploadFromFile($event, 'photo0')" />

找了好久才找到这个PWA上传图片的方法。使用文件选择器的输入是我在网上找到的允许 PWA 访问图片的唯一解决方案。

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

Answer 1

问题是 capture 属性。

According to MDN:

capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

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

如何从 PWA 访问图片库

How do I access the image gallery from a PWA

html

typescript

ionic-framework

progressive-web-apps

angular-pwa