我有一个Angular PWA，它应该允许用户将图像上传到AWS S3 Bucket。它可以在Windows和Android上的任何浏览器上运行，但在IOS上，当使用"照片库"时，它既不能在Firefox和Chrome上运行，也不能在Safari上运行。
选项"拍照或录像"实际上工作没有问题，但当使用"照片库"时，选项，它让我选择一个图像，但选择后什么也没有发生。调试与移动Chrome控制台建议，processFile($event)函数甚至没有调用，但我找不到原因。
由于设计选择，输入的样式是"display: none"我用另一个按钮打开它，但由于它打开后可以让我上传新照片，并让我实际选择图像，我不认为这是问题。
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上的表现完全相同。
经过长时间的反复试验，我找到了原因。实际上是向上铺了一层。出于设计原因，我在点击父组件的对象后调用上传。
在父组件中，文件输入所在的子组件用@ViewChild来引用。在父组件上的(click)之后，它从子组件调用一个方法，这将以编程方式导致文件输入上的单击。
由于某种原因，这导致所有来自文件输入的事件在iOS和MacOS Safari上都没有被触发。