反应文件上传未设置为状态

Question

我正在尝试实现一个文件上传按钮，然后将数据发送到 API。由于输入字段不应该是可见的，只有按钮应该触发上传对话框，所以我是这样实现的。

Problem: The File is not set to state, so I can not use a POST via axios in the onChange function.

import React, { useState } from 'react';
import useAxios from 'axios-hooks';

export default function BusinessCalendar(props: Props): React.ReactElement {
  const hiddenFileInput = React.useRef<HTMLInputElement>(null);
  const [selectedFile, setSelectedFile] = useState<any>();

  const onSubmit = (): void => {
    if (hiddenFileInput.current) {
      hiddenFileInput.current.click();
    }
  };

  const onChange = async (event: any): Promise<void> => {
    setSelectedFile(event.target.files[0]);
    await new Promise((resolve) => setTimeout(resolve, 100));
    
    const formData = new FormData();
    formData.append('File', selectedFile);

    console.log('file', selectedFile, formData); // => returns `undefined`
    
    await register({
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      data: {
        body: formData.get('File'), // => UNDEFINED
      },
    });
  };

  return (
        <input
          type="file"
          ref={hiddenFileInput}
          onChange={onChange}
          style={{ display: 'none' }}
        />
        <Button
          onClick={onSubmit}
          label="Add new"
          icon="icon-plus"
          type="secondary"
        />
    </div>
  );
}

Answer 1

React 的事件是synthetic and are reused after handler completes. And just as interpretator finds await operator the current execution frame gets terminated (handler completes) and React clears 事件的对象。

考虑使用 event.persist() 覆盖该行为。

反应文件上传未设置为状态

React file upload not set to state

javascript

file-upload

typescript

reactjs