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

我需要从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的app\u-stream变量中插入用户放入dropzone的文件。我可以从控制台看到该文件已被获取，但我无法理解如何管理它。如果听起来很愚蠢，很抱歉，这是我的第一个react项目。

您的

导入.js

需要

导出
类或
函数，需要从您的DropZone组件导入
：

import.js
导出默认函数（文件名）{
//'fs'是一个不适合浏览器的NodeJS库。你确定吗？
让app_stream=fs.createReadStream（文件名）；
让csvData_app=[]；
设csvData=[]；
//其他代码
}

dropzoned.jsx
Importer from./import.js'
// ...
onDropAccepted:（…参数）=>{
导入器（args）；//我不知道args包含什么
props.onCSVUpload（…参数）；
},
// ...
好的，我试试这个。Reguarding
fs
是一个不适合浏览器的NodeJS库。你确定吗？“不，我刚开发了第一个import.js在本地工作，现在我需要它来与浏览器一起工作，你有什么建议吗？你需要一个浏览器内API来访问文件内容，如。@NoProg如果答案有用，请标记为正确的，然后向上投票。
let app_stream = fs.createReadStream("app.csv");
let csvData_app = [];
let csvData = []; 
//other code