如何简单实现图片上传时预览

188 阅读1分钟

如何简单实现图片上传时的预览功能 以React为例
<img src={prevURL}/> <input type="file" onChange={e=>inpChange(e)}/>

const [prevURL,setPrevURL]=useState();

const inpChange=(e)=>{
    if(e.currentTarget.files){
        const file=e.currentTarget.files[0];
        const url=URL.createObjectURL(file);
        {/*
          然后将url赋值给img的prevURL;
        */}
        setPrevURL(url);
    }
}

1.上传之前

1.png

2.图片和视频预览

2.png

另外可以通过cropperjs实现上传图片裁剪