如何处理TypeScript中event.target.files的null概率？-解网

问：

我有一个handleImageUpload函数，该函数将事件和正在上传的文件作为参数。我分配了文件类型 FileList（来自 react）。当 Event.Target 为空或 null 时，会出现此问题。如果我将文件类型更改为 FileList |null 那么它会影响我代码的其他区域，我在其他地方遇到错误，我该如何解决？有没有办法在不更改代码的其他部分的情况下处理空概率？

handleImageUpload 函数：

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement> | 
React.DragEvent<HTMLDivElement>, files:FileList) => {
    stopReload(e);
    const data = new FormData()
    for(let i = 0; i<files?.length; i++){
      data.append('images', files[i])
    }
    const {data:images} = await axios.post('/products/upload', data, {
      headers: {'Content-Type':'multipart/form-data'}
    })
    setAddedPhotos(prevState => [...prevState, ...images])
    console.log(addedPhotos)
};

多伦多证券交易所：

   <div className="mb-8"
            onDragOver={(e) => stopReload(e)}
            onDrop={(e) => handleDragEvent(e)}
        > 
            <label 
                
                className="relative  cursor-pointer flex min-h-[200px] items-center justify-center rounded-md border border-dashed border-gray-300 p-12 text-center"
            >
                <div>
                    <span className="mb-2 block text-xl font-semibold text-[#07074D]">
                        Drop files here
                    </span>
                    <span className="mb-2 block text-base font-medium text-[#6B7280]">
                        Or
                    </span>
                    <span
                        className="inline-flex rounded border border-[#e0e0e0] py-2 px-7 text-base font-medium text-[#07074D]"
                    >
                        Browse
                    </span>
                </div>
                <input type="file" onChange={(e) => handleImageUpload(e, e.target.files (where the error occurs) )} name="image" className="hidden" multiple={true} />
            </label>
        </div>

其他功能：

const handleDragEvent = (e: React.DragEvent<HTMLDivElement>) => {
        handleImageUpload(e, e.dataTransfer.files);
    };

    const stopReload = (e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>) => {
        e.preventDefault();
        e.stopPropagation();
    }

ReactJS TypeScript 事件 null

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files: FileList | null) => {
  stopReload(e);

  // 👇 skip image upload without input file
  if(files === null) {
    return;
  }
  
  const data = new FormData()
  for (let i = 0; i < files.length; i++) { // 👈 optional chaining `files?.length` is no longer needed
    data.append('images', files[i])
  }
  const { data: images } = await axios.post('/products/upload', data, {
    headers: { 'Content-Type': 'multipart/form-data' }
  })
  setAddedPhotos(prevState => [...prevState, ...images])
  console.log(addedPhotos)
};

如何处理TypeScript中event.target.files的null概率？

how to handle the probability of null for event.target.files in typescript?

评论

评论