antd上传文件到服务器,Antd 4 Upload 图片上传（前端篇）

Antd 4 Upload 图片上传(前端篇)

简介

记录一下第一次使用 Ant Design 的 Upload 组件上传图片到后端服务器的基本流程和思路。

前端使用了 React + Antd ，后端使用 Nodejs 的Express 。

主要介绍 Antd 中 Upload 组件的照片墙，也就是上传多张图片。

Ant Design 官方 Upload 教程地址：Antd Upload 组件

实现

1. 简单的render

import React, { Component } from 'react'

import { Card, Upload } from 'antd'

import { PlusOutlined } from '@ant-design/icons'

class Example extends Component{

render() {

return (

上传图片

)

}

}

export default Example

也就是先做一个基本的 Upload 组件样子：

Card 组件是为了案例的样式效果好一点。现在的 Upload 组件还不具有上传的功能，只是简单的使用，listType 属性是 Upload 组件的显示效果，有 picture-card 、picture 、text 这三个属性值，对应的效果可在 Antd 官网查看。

2. 上传功能

给 Upload 组件添加 action 属性，就可以利用 FormData 表格数据的格式提交到后端服务器地址。

// 省略部分代码

// 后端API

const SERVER_URL = 'http://localhost:8000'

const UPLOAD_URL = `${SERVER_URL}/upload`

// render 中部分代码

listType='picture-card'

action={UPLOAD_URL}

>

上传图片

3. 查看图片

添加一个用于查看图片的 Modal 对话框组件，设置组件的 footer 属性为 null 来隐藏对话框对应的确认和取消按钮；然后在 Modal 组件中包含一个原生的 img 标签用来显示图片，设置对应的 src 和 alt 属性。

在