Question

想在使用dropzone上传之前预览图像。我正在尝试通过调用!ENTRY org.eclipse.e4.ui.workbench 4 0 2019-04-26 10:14:00.114 !MESSAGE Internal Error !STACK 0 org.eclipse.swt.SWTException: Widget is disposed at org.eclipse.swt.SWT.error(SWT.java:4595) at org.eclipse.swt.SWT.error(SWT.java:4510) at org.eclipse.swt.SWT.error(SWT.java:4481) at org.eclipse.swt.widgets.Widget.error(Widget.java:451) at org.eclipse.swt.widgets.Widget.checkWidget(Widget.java:350) at org.eclipse.swt.widgets.Control.computeSize(Control.java:663) at org.eclipse.swt.custom.ScrolledCompositeLayout.computeSize(ScrolledCompositeLayout.java:36) at org.eclipse.swt.widgets.Composite.computeSizeInPixels(Composite.java:218) at org.eclipse.swt.widgets.Control.computeSize(Control.java:666) at org.eclipse.swt.layout.GridData.computeSize(GridData.java:494) at org.eclipse.swt.layout.GridLayout.layout(GridLayout.java:224) at org.eclipse.swt.layout.GridLayout.layout(GridLayout.java:200) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1362) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1369) at org.eclipse.swt.widgets.Composite.updateLayout(Composite.java:1347) at org.eclipse.swt.widgets.Composite.setLayoutDeferred(Composite.java:1148) at org.eclipse.swt.widgets.Display.runDeferredLayouts(Display.java:3968) at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:3540) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$5.run(PartRenderingEngine.java:1173) at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:339) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.run(PartRenderingEngine.java:1062) at org.eclipse.e4.ui.internal.workbench.E4Workbench.createAndRunUI(E4Workbench.java:156) at org.eclipse.e4.ui.internal.workbench.swt.E4Application.start(E4Application.java:166) at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:203) at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:137) at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:107) at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:400) at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:255) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:659) at org.eclipse.equinox.launcher.Main.basicRun(Main.java:595) at org.eclipse.equinox.launcher.Main.run(Main.java:1501) at org.eclipse.equinox.launcher.Main.main(Main.java:1474)映射图像，但是在File类型上不存在。 Dropzone用file.preview扩展文件类型。我的问题是如何访问扩展类型？如何显示正在使用的URL.createObjectURL的图像。我是TypeScript的新手，无法解决这个问题。任何帮助表示赞赏。

我尝试创建一个自定义界面，将其导入并将其分配给文件：Pic []失败。抱怨属性在接受的文件上不存在。我明白那个。也许我必须声明函数是什么？不知道。

preview?: string

我在onDrop函数中为Object.assigned了一个预览URL。它可以保留，但仍无法通过files.preview访问它。
我尝试使用构造函数来获取扩展类型，但是完全迷失了我想要实现的目标。

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

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

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。

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

1 个答案: