react antd upload 选择文件时只能看到图片格式的文件

在antd的Upload组件中，默认情况下只会显示图片类型的文件，如果您需要选择其他类型的文件，可以通过设置"accept"属性来实现。例如，如果您需要选择.xlsx类型的文件，可以这样写：

<Upload accept=".xlsx" >
  <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

这样设置后，选择文件对话框中就只会显示.xlsx类型的文件了。如果您希望同时支持多种类型的文件，可以使用逗号分隔符分隔多个文件类型，例如：

<Upload accept=".xlsx,.doc,.pdf" >
  <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

这样设置后，选择文件对话框中就会显示.xlsx、.doc和.pdf类型的文件了。

相关问题

antd upload上传图片

好的，您可以按照以下步骤来实现antd upload上传图片：

1. 首先安装antd和axios。

npm install antd axios --save

2. 在您的组件中引入antd upload组件。

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

class UploadImage extends React.Component {
  state = {
    loading: false,
    imageUrl: '',
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
    );
  }
}

3. 在handleChange方法中，您需要将上传的图片转换为base64格式，以便于后续的保存和显示。

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

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

class UploadImage extends React.Component {
  state = {
    loading: false,
    imageUrl: '',
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
    );
  }
}

4. 最后，在handleSubmit方法中，您可以将base64格式的图片传给后端进行保存。

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

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

class UploadImage extends React.Component {
  state = {
    loading: false,
    imageUrl: '',
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };

  handleSubmit = () => {
    axios.post('/api/upload', {
      image: this.state.imageUrl,
    }).then(response => {
      message.success('Image uploaded successfully!');
    }).catch(error => {
      message.error('Failed to upload image!');
    });
  };

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <div>
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          beforeUpload={beforeUpload}
          onChange={this.handleChange}
        >
          {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
        </Upload>
        <Button type="primary" onClick={this.handleSubmit}>Submit</Button>
      </div>
    );
  }
}

以上就是antd upload上传图片的实现步骤。

antd 表单上传文件校验

### 使用 Ant Design 实现表单中的文件上传及校验

在构建基于 Ant Design 的 Web 应用程序时，处理文件上传并对其进行验证是一个常见的需求。为了满足这一功能，在 Ant Design 中提供了 `Upload` 组件用于文件的选择与提交，并且能够结合 `Form.Item` 来设置相应的规则来进行必要的校验。

#### 创建带有文件上传字段的表单项

下面展示了一个简单的例子，说明如何创建一个支持图片类型的文件上传控件，并对其添加基本的校验逻辑：

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

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
};

// 自定义校验函数
function checkFile(rule, value, callback) {
    const fileLimitSizeMB = 2;
    let isValidType = false;

    if (!value || !value.fileList.length) {
        return Promise.reject(new Error('请选择要上传的文件'));
    }

    // 检查文件大小不超过指定限制
    for (let i = 0; i < value.fileList.length; ++i) {
        if (value.fileList[i].size / 1024 / 1024 > fileLimitSizeMB) {
            return Promise.reject(
                new Error(`文件大小不得超过 ${fileLimitSizeMB} MB`)
            );
        }
        // 只允许特定格式的文件
        if (
            ['image/jpeg', 'image/png'].indexOf(value.fileList[i].type) !== -1
        ) {
            isValidType = true;
        }
    }

    if (!isValidType) {
        return Promise.reject(new Error('仅限于 JPEG 或 PNG 图片格式'));
    }

    return Promise.resolve();
}

class FileUploadDemo extends React.Component {
    render() {
        return (
            <Form {...formItemLayout}>
                <Form.Item name="upload" rules={[{ validator: checkFile }]}>
                    <Upload.Dragger>
                        <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">点击或将文件拖拽到这里</p>
                        <p className="ant-upload-hint">
                            支持JPEG/PNG格式，最大${fileLimitSizeMB}M.
                        </p>
                    </Upload.Dragger>
                </Form.Item>

                {/* 提交按钮 */}
                <Form.Item wrapperCol={{ offset: 6 }}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}

此代码片段展示了如何利用 `Upload.Dragger` 构建可拖放区域让用户选择文件[^1]。同时设置了自定义校验器 `checkFile()` 函数来确保所选文件符合预期条件——即只接受一定尺寸范围内的 JPG/JPEG 和 PNG 格式的图像文件[^4]。