antd+react中upload手動(dòng)上傳單限制上傳一張
需求
- 限制上傳一張圖片
- 點(diǎn)擊按鈕,手動(dòng)上傳
- 新增圖片替換原來的圖片,沒有圖片時(shí)顯示
PlusOutLined
- 圖片預(yù)覽彈出框
代碼
導(dǎo)入所需的庫(kù)
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加個(gè)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('請(qǐng)上傳圖片') formData.append('file', fileList[0]) setLoading(true) // 發(fā)起請(qǐng)求... setTimeout(() => { console.log("timeout"); }, 1000) setLoading(false) }
完整代碼在github:https://github.com/gmx-white/simple-wheel
到此這篇關(guān)于antd+react中upload手動(dòng)上傳單限制上傳一張的文章就介紹到這了,更多相關(guān)antd react upload手動(dòng)上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用React-Native+Mobx做一個(gè)迷你水果商城APP(附源碼)
這篇文章主要介紹了用React-Native+Mobx做一個(gè)迷你水果商城APP,功能需要的朋友可以參考下2017-12-12如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法,針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫(kù)等問題進(jìn)行了優(yōu)化,官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的,總結(jié)來看,就是更加的方便簡(jiǎn)單了2022-12-12react實(shí)現(xiàn)路由動(dòng)畫跳轉(zhuǎn)功能
這篇文章主要介紹了react路由動(dòng)畫跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下2023-10-10React styled components樣式組件化使用流程
styled-components 是react的一個(gè)第三方庫(kù),一種css私有化的方式。用來實(shí)現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中,css必定會(huì)出現(xiàn)命名沖突,與vue的scoped解決方案不同,react用styled-components的給類名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化2023-02-02React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼
因?yàn)?react、vue都是單頁(yè)面應(yīng)用,路由跳轉(zhuǎn)時(shí),就會(huì)銷毀上一個(gè)頁(yè)面的組件,但是有些項(xiàng)目不想被銷毀,想保存狀態(tài),本文給大家介紹了React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的代碼示例,需要的朋友可以參考下2024-01-01