react hooks 图片上传

• Z时代
• 2024-01-10
• 分类：综合

react hooks 多图片上传

<div className={feed.uploadcot}>
                                <ul className={feed.uploadimg}>
                                    {
                                        arrImg?.length >0 && arrImg.map((item, index) =>{
                                            return(
                                                <li key={index}>
                                                    <img src={item} />
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                                <div className={feed.upload}>
                                    <div className={feed.plusA}>
                                        <span>+</span>
                                        <input type="file" onChange={(event) =>handleUpdate(event)}  className={feed.file}/>
                                    </div>
                                </div>
                            </div>

   let accepts = ['image/jpeg', 'image/jpg', 'image/png']
    const [arrImg, setArrImg] = useState([])
    const handleUpdate = (event) =>{
        if(arrImg.length > 4){
            setMsgskbar("最多可以上传5张图片")
            setSnackbar({ ...snackbar, open: true })
            return false
        }
        let fileImg =event.target.files[0];
        // console.log(fileImg)
        Accepts(fileImg)
      }
        // 图片格式限定
    const Accepts = (files) => {
        if(!files){
        return false
        }
        let type = Array.isArray(accepts) && accepts.indexOf(files.type,0)
        if(type >= 0){
        if (files.size > 2097152) {
            setMsgskbar("上传的文件不能大于2M")
            setSnackbar({ ...snackbar, open: true })
            return;
        }else{
            Preview(files)
    　　　　}
    }else{
        setMsgskbar("请上传格式为jpg、png，jpeg的图片")
        setSnackbar({ ...snackbar, open: true })
        }
    }
    // 本地预览
    const Preview = (file) =>{ 
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
        //   arr添加新数据
          setArrImg([...arrImg, this.result])
        }
      }

以上是 react hooks 图片上传 的全部内容， 来源链接： utcz.com/z/384208.html