antd+react中upload手動上傳單限制上傳一張

更新時間：2022年06月16日 09:37:14 作者：gmx_white

本文主要介紹了antd+react中upload手動上傳單限制上傳一張，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

需求

限制上傳一張圖片
點擊按鈕，手動上傳
新增圖片替換原來的圖片，沒有圖片時顯示PlusOutLined
圖片預(yù)覽彈出框

代碼

導入所需的庫

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"  // 打開的文件框默認的文件類型
    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)
  }
  // 點擊上傳
  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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: