如何将文件从 react-dropzone 发送到其他 api

Question

我需要将文件从 react-dropzone 发送到 .js 文件中的变量。我为 dropzone 编写了这段代码：

const baseStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '20px',
    borderWidth: 2,
    borderRadius: 2,
    borderColor: '#eeeeee',
    borderStyle: 'dashed',
    backgroundColor: '#fafafa',
    color: '#bdbdbd',
    outline: 'none',
    transition: 'border .24s ease-in-out'
  };
  
  const activeStyle = {
    borderColor: '#2196f3'
  };
  
  const acceptStyle = {
    borderColor: '#00e676'
  };
  
  const rejectStyle = {
    borderColor: '#ff1744'
  };

const maxSize = 5000000 // bytes
const acceptedFileTypes = '.csv, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'

const TFApartCsvInput = (props) => {
    const [files, setFiles] = useState([]);
    const {
        getRootProps,
        getInputProps,
        isDragActive,
        isDragAccept,
        isDragReject,
        acceptedFiles,
      } = useDropzone({
        accept: acceptedFileTypes,
        multiple: false,
        minSize: 0,
        maxSize: maxSize,
          onDrop: (acceptedFiles, rejectedFiles) => {
            console.log('Accepted files:', acceptedFiles);
            console.log('Rejected files:', rejectedFiles);
        },
        onDropAccepted: props.onCSVUpload,
        onDropRejected: props.CSVTooBig
    });
    
      const style = useMemo(() => ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
      }), [
        isDragActive,
        isDragReject,
        isDragAccept
      ]);

      //ACCEPTED
      const acceptedFileItems = acceptedFiles.map(file => (
        <li key={file.path}>
          {file.path}
        </li>
      ));


      // RETURN
      return (
        <div className="container">
          <div {...getRootProps({style})}>
            <input {...getInputProps()} />
            <p>Drag 'n' drop some files here, or click to select files</p>
            <aside>
                <h4>Drag 'n' drop here .CSV files</h4>
                <ul>{acceptedFileItems}</ul>
            </aside>
          </div>
        </div>
      );
}

export default TFApartCsvInput;

我的 import.js 文件有一个像这样的变量：

let app_stream = fs.createReadStream("app.csv");
let csvData_app = [];
let csvData = []; 
//other code

我想在 import.js 的 app_stream 变量中插入用户放在 dropzone 中的文件。我可以从控制台看到该文件已被获取，但我无法理解如何管理它。抱歉，如果这听起来很愚蠢，这是我的第一个 react 项目。

Answer 1

您的import.js 需要export 一个class 或function，这需要从您的Dropzoned 组件imported：

import.js

export default function (filename) {
  // `fs` is a NodeJS library not suited for browsers. Are you sure?
  let app_stream = fs.createReadStream(filename);
  let csvData_app = [];
  let csvData = []; 
  //other code
}

dropzoned.jsx

import Importer from './import.js'
// ...
   onDropAccepted: (...args) => {
     Importer(args); // I don't know what `args` contains
     props.onCSVUpload(...args);
   },
// ...