Javascript 如何在react dropzone中将图像转换为base64?
我正在尝试在我的应用程序上实现react dropzone,但我无法发布并始终获取内部服务器错误,错误:TypeError:参数应该是类似对象或ASCII字符串的字节,而不是“列表”,以防数据发布必须使用convert base64 这是我的onDrop函数Javascript 如何在react dropzone中将图像转换为base64?,javascript,reactjs,base64,dropzone.js,react-dropzone,Javascript,Reactjs,Base64,Dropzone.js,React Dropzone,我正在尝试在我的应用程序上实现react dropzone,但我无法发布并始终获取内部服务器错误,错误:TypeError:参数应该是类似对象或ASCII字符串的字节,而不是“列表”,以防数据发布必须使用convert base64 这是我的onDrop函数 onDrop(uploadData) { this.setState({ uploadData, }); } onDropHandler(uploadData) { var uploadData = uploadData
onDrop(uploadData) {
this.setState({
uploadData,
});
}
onDropHandler(uploadData) {
var uploadData = uploadData[0];
const reader = new FileReader();
reader.readAsDataURL(uploadData);
reader.onload = event => {
this.setState({
uploadData: this.state.uploadData([{ base64: event.target.result }]),
});
};
reader.readAsDataURL(uploadData);
}
这是我的渲染方法:
<div className="dropzone">
<Dropzone
onDrop={this.onDrop.bind(this)}
accept="image/jpeg, image/png, image/jpg"
onDrop={uploadData => {
this.setState({ uploadData });
}}
maxSize={200000}
multiple={false}
>
<p>Maksimal 2 MB (JPG/PNG)</p>
</Dropzone>
{this.state.uploadData.map(f => (
<span key={f.name}>
{f.name} - {f.size} bytes
</span>
))}
</div>
{
this.setState({uploadData});
}}
maxSize={200000}
多重={false}
>
Maksimal 2MB(JPG/PNG)
{this.state.uploadData.map(f=>(
{f.name}-{f.size}字节
))}
也许这会有用
const handleDrop = React.useCallback((acceptedFiles) => {
const file = acceptedFiles.find(f => f)
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
console.log({
src: file.preview,
data: reader.result
})
setB64(reader.result)
}
}, []);
其中
setB64
是一个ReactuseState
Hook请将错误消息作为文本包含在问题中。包括完整的回溯。还包括整个react类,而不仅仅是一些方法。这里的这个.state.uploadData是什么?好像这是一个函数?为什么你在你的州有一个功能?