react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像

这篇具有很好参考价值的文章主要介绍了react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务需求:上传头像,上传完毕后拿到头像的url,把头像展示在页面中,最终把头像url和其他用户信息一起发送给服务器

react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像

 

上传头像流程

react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像

 

导入 Upload 组件和图标(一个加号,一个加载中)

import { Upload } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';

 

定义状态

const index = memo(() => {
  // 用于上传前和上传时切换
  const [loading, setLoading] = useState(false);

  // 用于保存服务端返回的头像url
  const [imageUrl, setImageUrl] = useState();
}

 

定义一个上传状态组件,上传前显示 + 号,上传时显示loading

const index = memo(() => {
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        上传
      </div>
    </div>
  );
}

 

组件代码(省略其他...)

const index = memo(() => {
  return (
    <Upload
      listType="picture-card" // 上传列表的内建样式
      showUploadList={false} // 是否展示文件列表
      action="" // 这里填写上传的地址
      beforeUpload={beforeUpload} // 上传前执行的操作
      onChange={handleChange} // 上传中、完成、失败都会调用这个函数。
      name='avatar' // 传递给后端的字段
    >
      {imageUrl ? (
        <img
          src={imageUrl}
          alt="avatar"
          style={{
            width: '100%',
          }}
        />
      ) :  (uploadButton)}
    </Upload>
  )
})

 

定义头像上传前执行的钩子函数

const index = memo(() => {
  // 该函数会在上传前执行,会把file对象传过来,可以对上传的文件类型判断,限制大小等
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 文件!');
    }
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isLt1M) {
      message.error('图片不能超过1MB!');
    }
    return isJpgOrPng && isLt1M;
  };
})

 

定义头像上传后执行的钩子函数

const index = memo(() => {
  const handleChange = (info) => {
      if (info.file.status === 'uploading') {
        setLoading(true);
        return;
      }
      // 当上传完毕
      if (info.file.status === 'done') {
          setLoading(false);
        // 判断是否上传成功
        if (info.file.response.code === 200) {
          // 把返回的图像地址设置给 imageUrl
          setImageUrl(info.file.response.data.imageUrl) // 取决于服务端返回的字段名
        }
      }
    };
})

 

以下是在控制台输出 info 对象

react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像

 

完整demo文章来源地址https://www.toymoban.com/news/detail-421447.html

import React, { memo, useState } from 'react'
import { UserWrapper } from './style'

import { Upload } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';

const index = memo(() => {

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 文件!');
    }
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isLt1M) {
      message.error('图片不能超过1MB!');
    }
    return isJpgOrPng && isLt1M;
  };

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      if (info.file.response.code === 200) {
        setLoading(false);
        setImageUrl(info.file.response.data.imageUrl)
      }
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        上传
      </div>
    </div>
  );
  
  return (
    <Upload
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="上传的地址"
      beforeUpload={beforeUpload}
      onChange={handleChange}
      name='avatar'
    >
      {imageUrl ? (
        <img
          src={imageUrl}
          alt="avatar"
          style={{
            width: '100%',
          }}
        />
      ) : (
        uploadButton
      )}
    </Upload>
  )
})

export default index

到了这里,关于react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头像的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包