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

Question

我正在尝试将图像作为文件上传，但我不确定如何准确地上传。

这是我的输入：

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

以下是"；e"：

类型为"ChangeEvent"的参数不可分配给"FileList"类型的参数。类型"ChangeEvent"类型"FileList"中缺少以下属性：length，项，[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';