【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
相关推荐
yngsqq11 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架