React开发（267）:ant design upload简单上传

前端小歌谣

于 2021-12-02 06:15:00 发布

阅读量659

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/weixin_43392489/article/details/121144263

这段代码展示了如何在React应用中使用Upload组件进行文件上传，配置了上传的URL、请求头、附加数据，并绑定了onChange事件处理函数。支持的文件扩展名包括doc、docx、pdf、jpg和jpeg。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

## 如果只是简单的上传，没必要写 customRequest
```javascript
 <Upload
    name="file"
    action={`${BASE_URL}/common/file/uploadByStream`}
    headers={{ authorization: localStorage.getItem('token'),
      'x-sys-encode': '115992066215908888170874',
      'x-sys-terminal': '15986015651108888222042',
    }}
    data={{ fileCode: 'STUDY_ATTACHMENT' }}
    onChange={this.handleUploadExtraFile}
    defaultFileList={articleAttachments}
  >
    <Button>
      <Icon type="upload" /> 上传
    </Button>
    <span style={{ marginLeft: 20 }}>支持扩展名：doc .docx .pdf .jpg，jpeg</span>
  </Upload>
```