typescript 使用Dropzone扩展文件类型的图像预览

50few1ms 于 2022-11-18 发布在 TypeScript

关注(0)|答案(2)|浏览(165)

希望在使用拖放区上载之前预览图像。我尝试通过调用file.preview来Map图像，但类型File上不存在该图像。拖放区使用preview?: string扩展文件类型。我的问题是如何访问扩展类型？如何显示具有URL的图像。createObjectURL我正在使用。我是TypeScript新手，无法理解该问题。任何帮助都是感激不尽的。

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

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

我在onDrop函数中为Object.分配了一个预览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

预期结果：文件。预览URL工作，我可以使用它作为背景图像。实际结果：文件类型File上不存在预览

typescript

来源：https://stackoverflow.com/questions/55864875/image-preview-using-dropzone-extending-file-type

2条答案

按热度按时间

j2datikz1#

我的问题是如何访问扩展类型？
通过从类型定义导入接口：
import Dropzone, { FileWithPreview } from "react-dropzone"
除了这个问题，Array.map函数返回了一个新的Array。当前您只Map了files数组，但并没有对新的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函数中发生的那样）。而且在Map数组时，你不必在render函数中显式地说一个文件是File。

赞(0）回复(0）举报 2022-11-18

rryofs0p2#

遗憾的是，@Alserda的答案不再完全适用，因为FileWithPreview导出似乎在版本6（大约2018年）之后从React Dropzone中删除了。
最后我使用了@Prozak对该答案的回复中的建议，即在我自己的代码中重新创建类型（实际上是接口），如下所示：

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

(This正是React Dropzone本身（版本7之前）中对其的定义。）
一旦你有了这个接口，你就可以把它插入到你自己的代码中，如@Alserda的答案所示。

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 使用Dropzone扩展文件类型的图像预览

2条答案

相关问题

热门标签

最新问答