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

业务需求：上传头像，上传完毕后拿到头像的url，把头像展示在页面中，最终把头像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 对象

完整demo

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地址在页面中显示头像

最新文章

热门文章