antd+react中upload手动上传单限制上传一张
作者：gmx_white
本文主要介绍了antd+react中upload手动上传单限制上传一张，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求
- 限制上传一张图片
- 点击按钮，手动上传
- 新增图片替换原来的图片，没有图片时显示
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'用到的常量/state
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)Upload
<div>
<Upload
classNmae="avatar-uploader"
listType="picture-card"
maxCount={1} // 限制最大上传
fileList={fileList}
showUploadList={true} // 列表缩略图
accept=".jpg, .png" // 打开的文件框默认的文件类型
beforeUpload={beforeUpload}
onRemove={handleRemove}
onPreview={handlePreview}
onChange={handleChange}
>
{
fileList && fileList.length >= 1 ? null : (
<div>
<PlusOutlined />
</div>
)
}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handlePreviewCancel}>
<img src={previewUrl} alt="" />
</Modal>
<Button
type="primary"
onClick={handleUpload}
loading={loading}
>上传</Button>
</div>回调函数
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手动上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！