文章目录
背景需求Upload.Dragger 组件Upload.Dragger 组件参考文献背景
负责后端的我要解决前端的问题真是太难了……
需求
使用 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组件上传文件