如何将文件从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

我想把用户放在dropzone中的文件插入到import.js的app_stream变量中。我可以从控制台上看到文件被拿走了，但我不知道如何管理它。如果听起来很愚蠢，很抱歉，这是我的第一个react项目。

Answer 1

您的import.js需要export、class或function，它们需要从Dropzone组件中import导出：

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);
},
// ...