如何使用react-dropzone预览图像
如何使用react-dropzone预览图像
提问于 2019-10-24 22:40:00
我希望用户从他们的计算机上“上传”一个文件，将其存储在浏览器中(我猜)，并显示图像，而不是将其发送到服务器。基本上，我希望发生这种情况(网站上的示例)：https://www.javascripture.com/FileReader
这本身就可以工作，但我使用的是react-dropzone，但它不工作。
我的代码：
import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import styles from "./dropzone.module.css";
import ImageZone from "../imagezone";
export default function Dropzone() {
const [path, setPath] = useState("");
const openFile = () => {
const reader = new FileReader();
reader.onload = () => {
const dataURL = reader.result;
setPath(dataURL);
};
};
const onDrop = useCallback(acceptedFiles => {
openFile();
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<div className={styles.mycontainer}>
<div className={styles.dropzone} {...getRootProps()}>
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Drag 'n' drop some files here, or click to select files</p>
)}
</div>
<ImageZone src={path}></ImageZone>
</div>
);
}回答 1
Stack Overflow用户
发布于 2019-10-24 23:11:37
您可以使用文件阅读器api读取拖放文件的内容，然后将其显示。您需要修复onload回调
const onDrop = useCallback(acceptedFiles => {
const reader = new FileReader();
reader.onload = e => {
const dataURL = e.target.result;
setPath(dataURL);
};
acceptedFiles.forEach(file => reader.readAsArrayBuffer(file))
}, []);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58543757
复制相关文章
相似问题
腾讯云开发者
