antdesign——upload上传图片

这篇文章距离上次修改已过232天，其中的内容可能已经有所变动。

在Ant Design中使用Upload组件上传图片，你可以参考以下的例子：

import React from 'react';
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

function CustomRequest(props) {
  const { onSuccess, onError, file, onProgress } = props;

  // 这里可以添加你的上传逻辑，例如使用axios或者其他HTTP库
  // 模拟上传进度
  setTimeout(() => {
    onProgress({ percent: 100 });
    onSuccess("mock-upload-url");
  }, file.size / 2);

  // 模拟上传失败
  // onError("mock-upload-error");
}

const UploadImage = () => {
  return (
    <Upload
      name="avatar"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="https://your-upload-api" // 替换为你的上传API
      beforeUpload={beforeUpload}
      customRequest={CustomRequest}
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  );
};

export default UploadImage;

在这个例子中，我们定义了beforeUpload函数来检查文件类型和大小，然后使用CustomRequest函数来处理实际的上传逻辑。你需要替换action属性的值为你的服务器上传API地址。

请注意，CustomRequest函数中的上传逻辑是模拟的，你需要根据你的实际后端API来修改上传逻辑。在实际应用中，你可能需要使用例如axios或其他HTTP库来发送请求。

antdesign——upload上传图片

评论已关闭

推荐阅读