javascript - React Dropzone FileReader - 无法读取为文件:{}
问题描述
我正在使用以下代码从删除/选择的文件中检索数据。
onDrop = (files) => {
files.forEach(file => {
const reader = new FileReader();
reader.onload = () => {
const fileAsBinaryString = reader.result
console.log(fileAsBinaryString);
}
reader.onabort = () => console.log('file reading was aborted');
reader.onerror = () => console.log('file reading has failed');
try {
reader.readAsDataURL(file);
} catch(err) {
console.log(err)
console.log(file);
}
this.setState({
fileName: file.name
})
});
}
render() {
return (
<div className="app">
<ReactDropzone onDrop={this.onDrop} className="dropzone">
<IconContext.Provider value={{ size: "5em" }}>
<IoMdCloudUpload/>
</IconContext.Provider>
<h1>{this.state.fileName}</h1>
</ReactDropzone>
</div>
);
}
当我运行服务器并在 dropzone 中放置一些东西时,即使 console.log(file) 给了我一个非空白的 File 对象,我也得到了
Error: cannot read as File: {}
在
reader.readAsDataURL(file);
关于为什么会发生这种情况以及我应该如何解决它的任何想法?
解决方案
onDrop = (acceptedFiles, rejectedFiles) => {
const reader = new FileReader()
reader.readAsDataURL(acceptedFiles[0])
reader.onload = () => {
if (!!reader.result) {
console.log('reader.result', reader.result)
}
}
}
推荐阅读
- amazon-web-services - lambda + efs - 安装与接入点
- node.js - 设置最大 JSON 响应大小限制
- android - 如何将更改应用到 RecyclerView 的每个 ViewHolder,即使是那些未显示的?
- php - API 平台:规范化映射超类仅包括来自超类的属性,不包括子类
- python - 如何在python中将整数值舍入到最接近的X倍数
- sql - 如何解决两个多对多表之间的排序比较问题
- javascript - Mapbox GL JS:为大型 GeoJSON 中的单个特征着色
- android - Android Studio 断点变成“行号信息在类中不可用
" - r - Rmarkdown 与 Rshiny
- c# - MSAL 使用 WPF .NET Core 3.1 应用程序获取令牌