【Ant-Desgin 头像上传框】限制数量为1张图片,base64,其他需求可以改我组件中的代码

Ant-Desgin 头像上传框

样式图


图片数量限制为1,当选择了图片后,需要切换图像时需点击头像完成切换

参数

js 复制代码
/**
 * @description: 图片上传组件
 * @param {*} action: 上传地址
 * @param {*} width: 宽度
 * @param {*} height: 高度
 * @param {*} onFileListChange: 文件列表改变的回调函数
 * @return {*}
 */
<FileUpload action={"/upload"} width={100} height={100} onFileListChange={handleFileListChange} />

主要代码

UpLoad 组件

js 复制代码
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-unused-vars */
import React, { useEffect, useState, useRef } from 'react'
import { Upload, message } from 'antd'
import PropTypes from 'prop-types'
import ImgCrop from 'antd-img-crop'

const FileUpload = ({ action, width = 100, height = 100, onFileListChange }) => {
  const [fileList, setFileList] = useState([])
  const [imgUrl, setImgUrl] = useState('')
  const uploadRef = useRef(null)

  const imgStyle = {
    width: `${width}px`,
    height: `${height}px`,
    objectFit: 'cover',
    borderRadius: '50%',
    cursor: 'pointer'
  }

  useEffect(() => {}, [])

  FileUpload.propTypes = {
    action: PropTypes.string.isRequired,
    width: PropTypes.number,
    height: PropTypes.number,
    onFileListChange: PropTypes.func
  }

  const onChange = async ({ fileList: newFileList }) => {
    const src = await new Promise(resolve => {
      const reader = new FileReader()
      reader.readAsDataURL(newFileList[0].originFileObj)
      reader.onload = () => resolve(reader.result)
    })
    setImgUrl(src)
    setFileList(newFileList)
    // 调用父组件传递的回调函数
    onFileListChange(newFileList)
  }

  const onPreview = async file => {
    const src = await new Promise(resolve => {
      const reader = new FileReader()
      reader.readAsDataURL(file.originFileObj)
      reader.onload = () => resolve(reader.result)
    })
    const image = new Image()
    image.src = src
    const imgWindow = window.open(src)
    imgWindow?.document.write(image.outerHTML)
  }

  const beforeUpload = async file => {
    console.log('beforeUpload')
    const isLt12M = file.size / 1024 / 1024 < 12
    const isImage = file.type.startsWith('image/')
    if (!isLt12M) {
      message.error('图片不得大于12MB!')
    }
    if (!isImage) {
      message.error('只允许上传图片!')
    }
    return isLt12M && isImage
  }

  const handleImageClick = () => {
    const uploadInput = document.querySelector('.ant-upload input[type="file"]')
    if (uploadInput) {
      uploadInput.click()
    }
  }

  return (
    <>
      <ImgCrop>
        <Upload
          action={action}
          ref={uploadRef}
          listType="picture-circle"
          fileList={fileList}
          onChange={onChange}
          onPreview={onPreview}
          beforeUpload={beforeUpload}
          showUploadList={false}
          maxCount={1}
        >
          {fileList.length < 1 && '+ Upload'}
        </Upload>
      </ImgCrop>
      {fileList.length > 0 && (
        <div>
          <img src={imgUrl} alt="avatar" style={imgStyle} onClick={handleImageClick} />
        </div>
      )}
    </>
  )
}

export default FileUpload

父组件

js 复制代码
/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from 'react'
import FileUpload from '.'


const Demo = () => {
  const [parentFileList, setParentFileList] = useState([])

  const handleFileListChange = (newFileList) => {
    // 更新父组件的文件列表
    setParentFileList(newFileList)
  }

  useEffect(() => {
    console.log(parentFileList, 666);
  }, [parentFileList, setParentFileList])

  return (
    <div>
      <FileUpload action={"/upload"} width={100} height={100} onFileListChange={handleFileListChange} />
    </div>
  )
}

export default Demo
相关推荐
cs_dn_Jie20 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554323 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理