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

目录背景需求参考文献背景负责后端的我要解决前端的问题真是太难了……需求参考文献https://blog.csdn.net/ThisEqualThis/article/details/103633911https://blog.csdn.net/qq_36753153/article/details/108243179https://blog.csdn.net/qq8241994/article/d

程序猿小泽

6674人浏览 · 2021-03-31 09:27:45

程序猿小泽 · 2021-03-31 09:27:45 发布

背景

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

需求

使用 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') {
            	//获得服务端返回的资源url
                console.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 (

        <Form
            name="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>
  )