发布时间:2024-02-04 18:00
PlusOutLined
import React, { useState, useEffect } from \'react\' import { Upload, Button, message, Modal } from \'antd\' import \'antd/dist/antd.css\'; import { PlusOutlined } from \'@ant-design/icons\'
const imgTypeLimit = [\'image/png\', \'image/jpg\'] const imgLimitSize = 3 * 1024 * 1024 // 图片列表 const [fileList, setFileList] = useState([]) // 图片预览框 const [previewVisible, setPreviewVisible] = useState(false) const [previewTitle, setPreviewTitle] = useState(\'\') const [previewUrl, setPreviewUrl] = useState(\'\') // 上传button加个loading const [loading, setLoading] = useState(false)
{ fileList && fileList.length >= 1 ? null : ( ) }
const beforeUpload = (file, fileList) => { // 判断文件格式 if ((imgTypeLimit.includes(file.type)) && file.size < imgLimitSize) { setFileList(fileList) } else { message.error(\'上传的图片格式或尺寸不符合要求!\') return Upload.LIST_IGNORE // 不加入fileList } // 返回false表示不上传 return false } // 移除图片 const handleRemove = (file) => { setFileList([]); } const handleChange = (info) => { setFileList(info.fileList) } // 图片预览 const handlePreview = (file) => { setPreviewTitle(file.name) setPreviewUrl(file.url || file.thumbUrl) setPreviewVisible(true) } // 图片预览结束/取消 const handlePreviewCancel = () => { setPreviewVisible(false) } // 点击上传 const handleUpload = () => { const formData = new FormData() if (!fileList || fileList.length === 0) return message.error(\'请上传图片\') formData.append(\'file\', fileList[0]) setLoading(true) // 发起请求... setTimeout(() => { console.log(\"timeout\"); }, 1000) setLoading(false) }
完整代码在github:https://github.com/gmx-white/simple-wheel
到此这篇关于antd+react中upload手动上传单限制上传一张的文章就介绍到这了,更多相关antd react upload手动上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!