使用“照片库”选项的 Html 文件输入在 IOS 上不起作用答案

【问题标题】：Html Fileinput with using the "Photo Library" option does not work on IOS使用“照片库”选项的 Html 文件输入在 IOS 上不起作用
【发布时间】：2021-11-16 03:23:29
【问题描述】：

我有一个 Angular PWA，它应该使用户能够将图像上传到 AWS S3 存储桶。它可以在任何浏览器中的 Windows 和 Android 上运行，但在 IOS 上，无论是在 Firefox 和 Chrome 还是在 Safari 中，当使用“照片库”时。

“拍摄照片或视频”选项实际上没有问题，但是当使用“照片库”选项时，它可以让我选择一个图像，但选择后没有任何反应。使用移动 Chrome 控制台进行调试提示 processFile($event) 函数甚至没有被调用，但我无法找出原因。

由于设计选择，输入的样式是“显示：无”，我使用另一个按钮打开它，但由于它打开后让我上传新照片并让我实际选择图像，我不认为这是问题。

HTML：

  <input #imageInput type="file" accept="image/*, video/*" (change)="processFile($event)"/>
  <button (click)="imageInput.click()">

打字稿：

async processFile($event) {

let input = $event.target;
this.reset();
this.loadingDialogRef = this.matDialog.open(PopupComponent, {data: {type: popupType.LOADING}});

this.files = input.files;
console.log(this.files);
  let i = input.files.length;
  this.fileNumber = i;

  if(i > this.limit){
    alert("Maximum von " + this.limit + " Bildern erlaubt.")
    this.reset();
    return;
  }

try{
  let res = await Promise.all([].map.call( this.files, (file) => {
    var reader = new FileReader();
        return new Promise  (function( resolve, reject) {
          
          reader.onload  = (event:any) => {
         
          resolve({encoded: event.target.result, file});
    
          };

          if(  file.size > 2512 * 10000){
            alert("Datei: " + file.name + " ist größer als die erlaubte größe von 25mb");   
            this.reset();
            reject();
            
          } 
        else if( file.size < 1000){
          alert("Datei: " + file.name + " ist kleiner als die mindest größe von 1kb");
          this.reset();
          reject();

        } else { 
          console.log("here");
           reader.readAsDataURL(file);
       }
      });
   
  })).then((results) => {
    console.log(this.imageType);
    var imageType = this.imageType;
    results.forEach((result: any) => {
      
      let id = uuid();
      
      this.cdnService.uploadImage(result.encoded, id, imageType ).subscribe(res =>{
        this.delay(2400).then(() =>{
          result.id = id;
          this.imagelist.push(result);
          this.imageURLs.push(res.objectURL)
          })
      });
    });
    return results;
  }); 
  console.log(res);
  return res;
} catch(err){
  this.reset();
}
}

reset(){
  this.imagelist = [];
  this.imageURLs = [];
  this.files = [];
  this.fileNumber = 0;
    if(this.loadingDialogRef){
      this.loadingDialogRef.close();
    }

}

编辑：我刚刚发现它在 MacOS 上的行为完全一样。

【问题讨论】：

这对我来说看起来不正确：$event.srcElement - 我认为这应该是 event.target？
改成 let input = $event.target;更改对问题没有影响。

标签： html ios angular typescript input

【解决方案1】：

因此，经过长时间的反复试验，我发现“原因”实际上是向上铺了一层。出于设计原因，我在单击父组件中的对象后调用了上传。

在父组件中，文件输入所在的子组件被 @ViewChild 引用。在父组件上（单击）之后，它从子组件调用了一个方法，这导致以编程方式单击文件输入。

由于某种原因，这导致来自文件输入的所有事件都没有在 iOS 以及 MacOS Safari 上触发。

【讨论】：