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类型的文件了。

相关问题

react antd Upload组件怎么禁止拖拽上传

React Antd Upload 组件默认支持拖拽上传，如果需要禁止拖拽上传，可以设置 Upload 组件的 `drag` 属性为 `false`，如下所示：

<Upload
  // ...其他属性
  drag={false}
>
  {/* ... */}
</Upload>

设置 `drag={false}` 后，用户将无法通过拖拽文件进行上传，只能通过点击上传按钮或者选择文件进行上传。

react antd图片上传

你可以使用 Ant Design 的 Upload 组件来实现图片上传功能。

首先需要安装 antd 和 axios：

npm install antd axios

然后在组件中引入 Upload 和 message 组件：

import { Upload, message } from 'antd';

接下来，定义一个组件状态来保存上传文件的列表：

state = {
  fileList: [],
};

然后在 Upload 组件中设置一些属性，如 action 表示上传的地址、accept 表示接受的文件类型、onChange 表示文件列表改变时的回调函数：

<Upload
  action="/api/upload"
  accept=".jpg,.png,.gif"
  fileList={this.state.fileList}
  onChange={this.handleUploadChange}
>
  <Button icon={<UploadOutlined />}>选择文件</Button>
</Upload>

最后，实现 handleUploadChange 回调函数来处理文件上传：

handleUploadChange = ({ fileList, file }) => {
  if (file.status === 'done') {
    message.success(`${file.name} 上传成功！`);
  } else if (file.status === 'error') {
    message.error(`${file.name} 上传失败！`);
  }

  // 保存文件列表
  this.setState({ fileList });
};

完整代码如下：

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

class ImageUpload extends React.Component {
  state = {
    fileList: [],
  };

  handleUploadChange = ({ fileList, file }) => {
    if (file.status === 'done') {
      message.success(`${file.name} 上传成功！`);
    } else if (file.status === 'error') {
      message.error(`${file.name} 上传失败！`);
    }

    // 保存文件列表
    this.setState({ fileList });
  };

  handleUpload = async (file) => {
    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', file);

    try {
      // 发送 POST 请求
      const response = await axios.post('/api/upload', formData);

      // 打印上传成功的信息
      console.log(response.data);
    } catch (error) {
      // 打印上传失败的信息
      console.log(error.message);
    }
  };

  render() {
    return (
      <Upload
        action={this.handleUpload}
        accept=".jpg,.png,.gif"
        fileList={this.state.fileList}
        onChange={this.handleUploadChange}
      >
        <Button icon={<UploadOutlined />}>选择文件</Button>
      </Upload>
    );
  }
}

export default ImageUpload;

注意，这里的 action 属性需要传入一个处理上传的函数，可以使用 axios 发送 POST 请求将文件上传到服务器。在 handleUploadChange 回调函数中，我们可以根据上传文件的状态显示不同的提示信息。