小编Mit*_*uer的帖子

如何在加载文件项后仅从 dataTransfer 调度 FileList

我使用名为react-dropzone 和React-Redux 的Node 包模块来允许用户将文件拖到窗口上并显示文件信息。

React-dropzone 组件为我提供了标准event.dataTransfer.files中的 FileList 。

我遇到的问题是,当我将该 FileList 分派到 Redux 存储时,File 项尚未加载到 FileList 数组中,因此当我分派 File 数据时,我只是得到{"preview":"blob:file:///f30eafb8-8a77-4402-9111-379590b4a03f"}.

如果我将文件项记录到控制台,它们显示得很好,因为它们的数据在我查看时已加载,但我不知道如何仅在加载后分派文件信息。

下面是当我将 FileList 数组中的一个文件项记录到控制台时所看到的示例。

{
  lastModified: 1473709614000,
  lastModifiedDate: Mon Sep 12 2016 12:46:54 GMT-0700 (PDT),
  name: "test_image.jpg",
  path: "/Users/mitchconquer/Desktop/test_image.jpg",
  preview: "blob:file:///0fe69686-125d-464a-a0a8-a42e497d3808",
  size: 41805,
  type: "image/jpeg",
  webkitRelativePath: ""
}
Run Code Online (Sandbox Code Playgroud)

我相信问题只是文件对象未完全加载,但我无法找到一种方法来仅在数据完全加载后才触发操作。有人能指出我正确的道路吗?

这是我使用react-dropzone的组件:

// FileDrop.js
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import styles from './Home.css';
import Dropzone from 'react-dropzone';

export default class FileDrop extends …
Run Code Online (Sandbox Code Playgroud)

drag-and-drop data-transfer filelist reactjs redux

5
推荐指数
1
解决办法
4891
查看次数

标签 统计

data-transfer ×1

drag-and-drop ×1

filelist ×1

reactjs ×1

redux ×1