使用拖放区扩展文件类型进行图像预览

Question

想在使用拖放区上传之前预览图像。我正在尝试通过调用file.preview来映射图像，但它在文件类型上不存在。Dropzone 使用preview?: string扩展文件类型。我的问题是如何访问扩展类型？如何使用我正在使用的 URL.createObjectURL 显示图像。我是 TypeScript 的新手，无法解决这个问题。任何帮助，不胜感激。

• 我尝试创建一个自定义界面，导入它并将其分配给文件：Pic[] 没有成功。抱怨接受的文件上不存在这些属性。我明白这一点。也许我必须声明函数中的内容是什么？不知道。

export interface Pic {
picId: string
name: string
preview: string
}

• 我在onDrop函数中分配了一个预览URL。它继承了，但仍然无法通过files.preview访问它。

我

• 尝试使用构造函数来获取扩展类型，但完全迷失在我想要实现的目标中。

import * as React from "react"
import styles from "../../styles.scss"
import Dropzone from "react-dropzone"
class ImageUpload extends React.Component {
state = {
files: []
}
handleOnDrop = (files: File[]) => {
files.map(file => Object.assign(file, {
preview: URL.createObjectURL(file)
}))
this.setState({ files: [...this.state.files, ...files] })
console.log(files)
}
render() {
const files = this.state.files.map((file: File) => (
console.log(file),
(
<li key={file.name}>
{file.preview}
</li>
)
))
return (
<form>
<div>
<h2>Upload images</h2>
</div>
<Dropzone onDrop={this.handleOnDrop} accept="image/*" />
<ul>{files}</ul>
</form>
)
}
}
export default ImageUpload

预期结果： file.preview URL 有效，我可以将其用作背景图像。 实际结果：文件类型上不存在文件预览。

Answer 1

我的问题是如何访问扩展类型？

通过从类型定义导入接口：

import Dropzone, { FileWithPreview } from "react-dropzone"

撇开这个问题不谈。Array.map 函数返回一个新的 Array。目前，您只映射文件数组，但未对新数组执行任何操作。您可能希望使用该新数组来设置您的状态：

const filesWithPreviews: FileWithPreview[] = files.map(
// Add the preview property to each file element
);
this.setState({ files: [...this.state.files, ...filesWithPreviews] });

看到你是 TypeScript 的新手。您应该设置一个与您的状态匹配的接口。

interface IState {
files: FileWithPreview[];
}
class ImageUpload extends React.Component<{}, IState> {
}

通过这种方式，TypeScript 让你知道你正在尝试将不正确类型的元素存储到你想要的状态(就像现在在你的 dropHandle 函数中发生的那样)。在映射数组时，您不必明确表示文件是渲染函数中的File。

Answer 2

可悲的是，@Alserda的答案不再完全适用，因为FileWithPreview导出似乎在版本 6(大约 2018 年)之后从 React Dropzone 中删除。

我最终使用了@Prozak对该答案的回复中的建议，即在我自己的代码中重新创建类型(实际上是接口)，如下所示：

export interface FileWithPreview extends File {
preview?: string;
}

(这正是 React Dropzone 本身(版本 7 之前)中定义的

。有了接口后，您可以将其插入自己的代码中，如@Alserda的答案所示。