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框架怎么使用文件上传

在 React Antd 中使用文件上传，可以使用 Upload 组件。

首先，需要安装 antd 和 axios 包：

npm install antd axios

然后，在组件中引入 Upload 和 Button 组件：

import { Upload, Button } from 'antd';

接着，创建一个 state 用于保存上传文件的状态：

state = {
  fileList: [],
};

然后，在 render 函数中将 Upload 和 Button 组件渲染出来：

render() {
  const { fileList } = this.state;

  const props = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange: this.handleChange,
    multiple: true,
  };

  return (
    <div>
      <Upload {...props} fileList={fileList}>
        <Button icon={<UploadOutlined />}>选择文件</Button>
      </Upload>
    </div>
  );
}

其中，`props` 对象中的 `action` 属性是上传文件的接口地址，`onChange` 属性是上传文件状态发生改变时的回调函数，`multiple` 属性表示是否支持多选文件。

在 `handleChange` 回调函数中，可以处理上传文件的状态：

handleChange = ({ fileList }) => {
  this.setState({ fileList });
};

最后，在上传文件的接口中，可以通过 `request` 方法获取上传的文件信息：

axios({
  method: 'post',
  url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  data: fileList[0],
}).then((response) => {
  console.log(response);
});

这样就完成了在 React Antd 中使用文件上传的实现。