文章目录

背景

负责后端的我要解决前端的问题真是太难了……

需求

使用 antd 的 form 中的 Upload 组件实现 文件上传

官网链接

Upload.Dragger 组件

使用的Form组件如下图，具体使用其中的 Upload.Dragger 实现

思路：首先将图片上传到 Azure Blob 中，同时在 response 中获得Blob传回的图片URL，在 submit 的时候写入数据库

图片上传Azure Blob的操作可参看 这篇博文

upload 组件中几个重要参数使用说明：

代码实现：只展示Upload部分的代码

const dragger = {name: 'file',multiple: true,action: FileUploadURL，//上传地址onChange(info) {const {status } = info.file;if (status !== 'uploading') {//获得服务端返回的资源urlconsole.log(info.file.response.data); }if (status === 'done') {message.success(`${info.file.name} file uploaded successfully.`);} else if (status === 'error') {message.error(`${info.file.name} file upload failed.`);}},};return (<Formname="validate_other"style={{margin:30,flex:1} }{...formItemLayout}onFinish={onFinish}form={form}><Form.Item label="Dragger" ><Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle><Upload.Dragger name="files" {...dragger}><p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">Click or drag file to this area to upload</p><p className="ant-upload-hint">Support for a single or bulk upload.</p></Upload.Dragger></Form.Item></Form.Item>)

Upload.Dragger 组件

参考文献

antd中使用Form控件和Upload控件对图片上传并进行验证

Antd 的 Upload 上传组件 uploading 状态踩坑记

在antd-pro的form中使用Upload组件上传文件