记录下在H5中实现点击上传图片时遇到的问题, 以下机型均为16Pro ios18.1.1
- ios第一次选择图片或者拍照不触发change事件,需要把input放入文档流中
const chooseImage: () => Promise<string> = () => {
return new Promise((resolve, reject) => {
const fileInput = document.createElement('input');
fileInput.style.display = 'none';
fileInput.type = 'file';
fileInput.accept = 'image/*';
document.body.appendChild(fileInput);
fileInput.click();
function change(event: Event) {
const target = event.target as HTMLInputElement;
const files = target.files;
if (files && files.length > 0) {
const file = files[0];
const validTypes = ['image/jpeg', 'image/png'];
if (!validTypes.includes(file.type)) {
reject('Invalid file type. Please upload an image (jpeg, png, gif).');
}
const url = URL.createObjectURL(file);
resolve(url);
} else {
resolve('');
}
fileInput.removeEventListener('change', change);
}
fileInput.addEventListener('change', change);
});
};
- ios中异步请求后调用input的click方法不生效, 需要把方法放在setTimeout内调用
const handleClick = async () => {
await fetch();
const timer = setTimeout(() => {
clearTimeout(timer);
uploadImage();
}, 0);
};