问题描述
我正在使用这个库 https://github.com/kirill3333/react-avatar
有一种方法 onBeforeFileLoad()
可以检查图像的大小。稍后所选照片将保存在 preview
中。我的问题是,如何获取用户选择的普通照片——即他尚未裁剪的照片?
import React,{ useState } from "react";
import ReactDOM from "react-dom";
import Avatar from "react-avatar-edit";
const App = () => {
const [preview,setPreview] = useState(null);
const [src,setSrc] = useState("./example/einshtein.jpg");
const onClose = () => {
setPreview(null);
};
const onCrop = (preview) => {
setPreview(preview);
};
const onBeforeFileLoad = (elem) => {
if (elem.target.files[0].size > 71680) {
alert("File is too big!");
elem.target.value = "";
}
else {
// Todo
// get the normale photo
}
};
return (
<div>
<Avatar
width={390}
height={295}
onCrop={onCrop}
onClose={onClose}
onBeforeFileLoad={onBeforeFileLoad}
src={src}
/>
<img src={preview} alt="Preview" />
</div>
);
};
ReactDOM.render(<App />,document.getElementById("root"));
解决方法
它处于您的“src”状态。
根据您使用的软件包的文档; onImageLoad(image)
将返回加载的图像。
您也可以使用 onBeforeFileLoad
函数。例如,将其设置为 <img src={original}>
元素。
const onBeforeFileLoad = (elem) => {
....
else {
setOriginal(elem.target.files[0])
}