ios中H5 上传文件input的onChange事件不触发

283 阅读1分钟

记录下在H5中实现点击上传图片时遇到的问题, 以下机型均为16Pro ios18.1.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);
  });
};
  1. ios中异步请求后调用input的click方法不生效, 需要把方法放在setTimeout内调用
const handleClick = async () => {
  await fetch();
  const timer = setTimeout(() => {
    clearTimeout(timer);
    uploadImage();
  }, 0);
};