antd+react中upload手動上傳單限制上傳一張
需求
- 限制上傳一張圖片
- 點(diǎn)擊按鈕,手動上傳
- 新增圖片替換原來的圖片,沒有圖片時(shí)顯示
PlusOutLined
- 圖片預(yù)覽彈出框
代碼
導(dǎo)入所需的庫
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([]) // 圖片預(yù)覽框 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" // 打開的文件框默認(rèn)的文件類型 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>
回調(diào)函數(shù)
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) } // 圖片預(yù)覽 const handlePreview = (file) => { setPreviewTitle(file.name) setPreviewUrl(file.url || file.thumbUrl) setPreviewVisible(true) } // 圖片預(yù)覽結(jié)束/取消 const handlePreviewCancel = () => { setPreviewVisible(false) } // 點(diǎn)擊上傳 const handleUpload = () => { const formData = new FormData() if (!fileList || fileList.length === 0) return message.error('請上傳圖片') formData.append('file', fileList[0]) setLoading(true) // 發(fā)起請求... setTimeout(() => { console.log("timeout"); }, 1000) setLoading(false) }
完整代碼在github:https://github.com/gmx-white/simple-wheel
到此這篇關(guān)于antd+react中upload手動上傳單限制上傳一張的文章就介紹到這了,更多相關(guān)antd react upload手動上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用React-Native+Mobx做一個迷你水果商城APP(附源碼)
這篇文章主要介紹了用React-Native+Mobx做一個迷你水果商城APP,功能需要的朋友可以參考下2017-12-12react實(shí)現(xiàn)路由動畫跳轉(zhuǎn)功能
這篇文章主要介紹了react路由動畫跳轉(zhuǎn)功能,大概思路是下載第三方庫?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動畫功能,就在那個組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下2023-10-10React styled components樣式組件化使用流程
styled-components 是react的一個第三方庫,一種css私有化的方式。用來實(shí)現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中,css必定會出現(xiàn)命名沖突,與vue的scoped解決方案不同,react用styled-components的給類名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化2023-02-02React實(shí)現(xiàn)頁面狀態(tài)緩存(keep-alive)的示例代碼
因?yàn)?react、vue都是單頁面應(yīng)用,路由跳轉(zhuǎn)時(shí),就會銷毀上一個頁面的組件,但是有些項(xiàng)目不想被銷毀,想保存狀態(tài),本文給大家介紹了React實(shí)現(xiàn)頁面狀態(tài)緩存(keep-alive)的代碼示例,需要的朋友可以參考下2024-01-01