欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

antd+react中upload手動(dòng)上傳單限制上傳一張

 更新時(shí)間:2022年06月16日 09:37:14   作者:gmx_white  
本文主要介紹了antd+react中upload手動(dòng)上傳單限制上傳一張,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求

  • 限制上傳一張圖片
  • 點(diǎn)擊按鈕,手動(dòng)上傳
  • 新增圖片替換原來(lái)的圖片,沒(méi)有圖片時(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"  // 打開(kāi)的文件框默認(rèn)的文件類(lèi)型
    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?forwardRef?用法案例分析

    React?forwardRef?用法案例分析

    這篇文章主要介紹了React forwardRef用法,forwardRef允許你的組件使用ref將一個(gè)DOM節(jié)點(diǎn)暴露給父組件,本文結(jié)合案例分析給大家講解的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 用React-Native+Mobx做一個(gè)迷你水果商城APP(附源碼)

    用React-Native+Mobx做一個(gè)迷你水果商城APP(附源碼)

    這篇文章主要介紹了用React-Native+Mobx做一個(gè)迷你水果商城APP,功能需要的朋友可以參考下
    2017-12-12
  • 如何使用Redux Toolkit簡(jiǎn)化Redux

    如何使用Redux Toolkit簡(jiǎn)化Redux

    redux-toolkit是目前redux官方推薦的編寫(xiě)redux邏輯的方法,針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴(lài)外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化,官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的,總結(jié)來(lái)看,就是更加的方便簡(jiǎn)單了
    2022-12-12
  • react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能

    react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能

    這篇文章主要介紹了react路由動(dòng)畫(huà)跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下
    2023-10-10
  • react為什么不推薦使用index作為key

    react為什么不推薦使用index作為key

    本文主要介紹了react為什么不推薦使用index作為key,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • React styled components樣式組件化使用流程

    React styled components樣式組件化使用流程

    styled-components 是react的一個(gè)第三方庫(kù),一種css私有化的方式。用來(lái)實(shí)現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中,css必定會(huì)出現(xiàn)命名沖突,與vue的scoped解決方案不同,react用styled-components的給類(lèi)名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化
    2023-02-02
  • react實(shí)現(xiàn)拖拽模態(tài)框

    react實(shí)現(xiàn)拖拽模態(tài)框

    這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)拖拽模態(tài)框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 在react中使用tailwind的問(wèn)題

    在react中使用tailwind的問(wèn)題

    這篇文章主要介紹了在react中使用tailwind的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • React封裝CustomSelect組件思路詳解

    React封裝CustomSelect組件思路詳解

    小編需要封裝一個(gè)通過(guò)Popover彈出框里可以自定義渲染內(nèi)容的組件,渲染內(nèi)容暫時(shí)有: 單選框, 復(fù)選框,接下來(lái)通過(guò)本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下
    2022-07-07
  • React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼

    React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼

    因?yàn)?react、vue都是單頁(yè)面應(yīng)用,路由跳轉(zhuǎn)時(shí),就會(huì)銷(xiāo)毀上一個(gè)頁(yè)面的組件,但是有些項(xiàng)目不想被銷(xiāo)毀,想保存狀態(tài),本文給大家介紹了React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的代碼示例,需要的朋友可以參考下
    2024-01-01

最新評(píng)論