如何使用 TypeScript 在 React 中将图像上传为文件

Question

我正在尝试将图片作为文件上传，但我不确定具体如何操作。

这是我的输入：

<input type="file" name="image" placeholder='Image' onChange={e => handleSetImage(e, i)}/>

这是“e”的错误：

Argument of type 'ChangeEvent' is not assignable to parameter of type 'FileList'. Type 'ChangeEvent' is missing the following properties from type 'FileList': length, item, [Symbol.iterator]ts(2345)

这是我的处理程序：

const [colorsAndImages, setColorsAndImages] = useState<[{image: object, color: string}]>([{image: {}, color: ''}])

...

    const handleSetImage = (event: FileList, index: number) => {
            const files = event;
            const list = [...colorsAndImages]
            list[index][image] = list
            console.log(list);
        };

Answer 1

那是因为您在 handleSetImage 中输入了错误的 event 参数。根据您的称呼方式，即：

onChange={e => handleSetImage(e, i)}

您实际上是将 ChangeEvent<HTMLInputElement> 作为 e 传递给您的函数。因此，您需要相应地更新其类型：

const handleSetImage = (event: ChangeEvent<HTMLInputElement>, index: number) {
  const { files } = event.target;

  // Or if you don't prefer Object destructuring assignment...
  // const files = event.target.files;

  // Rest of the logic here
}

这需要您从 React 库中导入 ChangeEvent 的类型，如果您的 IDE 无法自动自动导入它：

import { ChangeEvent } from 'react';

如何使用 TypeScript 在 React 中将图像上传为文件

How to upload image as file in React with TypeScript

typescript

reactjs

tsx