我在 AWS EC2 实例服务器上继承了前端的 React.JS 和后端的 Node.JS/Express.JS 代码库。我使用的代码是 react-dropzone ( https://react-dropzone.js.org/ ),并且只用于拖放图像文件。我正在处理的项目的产品所有者现在希望它接受所有文件(*.pdf、*.docx、*.xlsx 等)。
我想知道如何让它接受所有文件?我已经浏览了 react-dropzone 文档,但我还没有找到任何示例来展示如何让它接受所有文件类型?是否像设置accept="..."
from accept="image/*"
to一样简单accept="*/*"
?字符串可以accept="..."
是一个数组,比如:accept=["image/*","text/*",...]
等吗?什么是让 react-dropzone 接受任何文件类型的正确方法?
这是我的onDrop
回调代码——</p>
onDrop = (acceptedFiles, rejectedFiles) => {
let files = acceptedFiles.map(async file => {
let data = new FormData();
data.append("file", file);
let item = await axios
.post("triage/upload", data, {
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => {
return Object.assign(file, {
preview: URL.createObjectURL(file),
filename: response.data.filename
});
})
.catch(err => {
let rejects = rejectedFiles.map(async file => {
let data = new FormData();
await data.append("file", file);
console.log("There was an error while attempting to add your files:", err);
console.log("The files that were rejected were:\n", rejects.join('\n'))
})
});
return item;
});
Promise.all(files)
.then(completed => {
console.log("completed", completed);
let fileNames = completed.map(function(item) {
return item["filename"];
});
this.setState({ files: completed, fileNames: fileNames });
})
.catch(err => {
console.log('DROPZONE ERROR:', err);
});
};
...这是<DropZone>
同一文件中的代码-</p>
<Dropzone accept="image/*" onDrop={this.onDrop}>
{({ getRootProps, getInputProps, isDragActive }) => {
return (
<div
{...getRootProps()}
className={classNames("dropzone", {
"dropzone--isActive": isDragActive
})}
>
<input {...getInputProps()} />
{isDragActive ? (
<div>
<div className="centered">
<Icon name="cloud upload" size="big" />
</div>
<div className="centered">Drop Files Here.</div>
<div className="centered">
<Button className="drop-button">
Or Click to Select
</Button>
</div>
</div>
) : (
<div>
<div className="centered">
<Icon name="cloud upload" size="big" />
</div>
<div className="centered">
Drag and Drop Supporting Files here to
Upload.
</div>
<div className="centered">
<Button className="drop-button">
Or Click to Select
</Button>
</div>
</div>
)}
</div>
);
}}
</Dropzone>