Question

我只是想把我的'input'标签上的文件上传到javascript中。当我在弹出窗口中双击我的文件以选择它时，javascript告诉我事件obj不包含任何图像文件信息。我相信文件信息应该位于event.target.files [i]中，但事实并非如此，您可以在返回的JSON事件对象中看到。

JSX：

render() {
  return(
    <input className="account-settings-title-input" type="file" onChange={(e) => this.handleChange(e)} />
  );
}

private handleChange(event: any) {
    const util = require('util');
    console.log('Selected file:', util.inspect(event));
}

应包含文件数据的事件对象的JSON：

  Selected file: { dispatchConfig: 
 { phasedRegistrationNames: { bubbled: 'onChange', captured: 'onChangeCapture' 
 },
 dependencies: 
  [ 'topBlur',
    'topChange',
    'topClick',
    'topFocus',
    'topInput',
    'topKeyDown',
    'topKeyUp',
    'topSelectionChange' ] },
 _targetInst: 
 { tag: 5,
 key: null,
 type: 'input',
 stateNode: 
  { '__reactInternalInstance$wgylo8v4wb': [Circular],
    '__reactEventHandlers$wgylo8v4wb': [Object],
    _wrapperState: [Object],
    value: [Getter/Setter],
    _valueTracker: [Object] },
 return: 
  { tag: 5,
    key: null,
    type: 'div',
    stateNode: [Object],
    return: [Object],
    child: [Object],
    sibling: null,
    index: 0,
    ref: null,
    pendingProps: null,
    memoizedProps: [Object],
    updateQueue: null,
    memoizedState: null,
    internalContextTag: 0,
    effectTag: 0,
    nextEffect: null,
    firstEffect: null,
    lastEffect: null,
    expirationTime: 0,
    alternate: null },
 child: null,
 sibling: null,
 index: 2,
 ref: null,
 pendingProps: null,
 memoizedProps: 
  { className: 'account-settings-title-input',
    type: 'file',
    onChange: [Function: onChange] },
 updateQueue: null,
 memoizedState: null,
 internalContextTag: 0,
 effectTag: 0,
 nextEffect: null,
 firstEffect: null,
 lastEffect: null,
 expirationTime: 0,
 alternate: null },
 nativeEvent: { isTrusted: [Getter] },
 type: 'change',
 target: 
 { '__reactInternalInstance$wgylo8v4wb': 
  { tag: 5,
    key: null,
    type: 'input',
    stateNode: [Circular],
    return: [Object],
    child: null,
    sibling: null,
    index: 2,
    ref: null,
    pendingProps: null,
    memoizedProps: [Object],
    updateQueue: null,
    memoizedState: null,
    internalContextTag: 0,
    effectTag: 0,
    nextEffect: null,
    firstEffect: null,
    lastEffect: null,
    expirationTime: 0,
    alternate: null },
  '__reactEventHandlers$wgylo8v4wb': 
  { className: 'account-settings-title-input',
    type: 'file',
    onChange: [Function: onChange] },
  _wrapperState: 
  { initialChecked: undefined,
    initialValue: undefined,
    controlled: false },
  value: [Getter/Setter],
  _valueTracker: 
  { getValue: [Function: getValue],
    setValue: [Function: setValue],
    stopTracking: [Function: stopTracking] } },
  currentTarget: 
  { '__reactInternalInstance$wgylo8v4wb': 
  { tag: 5,
    key: null,
    type: 'input',
    stateNode: [Circular],
    return: [Object],
    child: null,
    sibling: null,
    index: 2,
    ref: null,
    pendingProps: null,
    memoizedProps: [Object],
    updateQueue: null,
    memoizedState: null,
    internalContextTag: 0,
    effectTag: 0,
    nextEffect: null,
    firstEffect: null,
    lastEffect: null,
    expirationTime: 0,
    alternate: null },
 '__reactEventHandlers$wgylo8v4wb': 
  { className: 'account-settings-title-input',
    type: 'file',
    onChange: [Function: onChange] },
 _wrapperState: 
  { initialChecked: undefined,
    initialValue: undefined,
    controlled: false },
 value: [Getter/Setter],
 _valueTracker: 
  { getValue: [Function: getValue],
    setValue: [Function: setValue],
    stopTracking: [Function: stopTracking] } },
 eventPhase: 3,
 bubbles: true,
 cancelable: false,
 timeStamp: 15921.499999705702,
 defaultPrevented: false,
 isTrusted: true,
 isDefaultPrevented: [Function],
 isPropagationStopped: [Function],
 _dispatchListeners: [Function: onChange],
 _dispatchInstances: 
 { tag: 5,
 key: null,
 type: 'input',
 stateNode: 
  { '__reactInternalInstance$wgylo8v4wb': [Circular],
    '__reactEventHandlers$wgylo8v4wb': [Object],
    _wrapperState: [Object],
    value: [Getter/Setter],
    _valueTracker: [Object] },
 return: 
  { tag: 5,
    key: null,
    type: 'div',
    stateNode: [Object],
    return: [Object],
    child: [Object],
    sibling: null,
    index: 0,
    ref: null,
    pendingProps: null,
    memoizedProps: [Object],
    updateQueue: null,
    memoizedState: null,
    internalContextTag: 0,
    effectTag: 0,
    nextEffect: null,
    firstEffect: null,
    lastEffect: null,
    expirationTime: 0,
    alternate: null },
 child: null,
 sibling: null,
 index: 2,
 ref: null,
 pendingProps: null,
 memoizedProps: 
  { className: 'account-settings-title-input',
    type: 'file',
    onChange: [Function: onChange] },
 updateQueue: null,
 memoizedState: null,
 internalContextTag: 0,
 effectTag: 0,
 nextEffect: null,
 firstEffect: null,
 lastEffect: null,
 expirationTime: 0,
 alternate: null } }

Answer 1

首先，您需要创建对输入的引用，如下所示：

<input type='file' ref={(ref) => this.fileUpload = ref}/>

获得引用后，您不必监听onChange事件，因为将填充'files'数组，能够获取如下文件：

const file = this.fileUpload.files[0];

如果一次上传多个文件，则可以更改数组的索引以访问多个文件。

在React中上传文件

1 个答案: