如何从 PWA 访问图片库

问题描述

我需要知道如何从 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;
  }

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

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

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

解决方法

问题在于 capture 属性。

According to MDN：

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

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