ant design upload 组件的扩展

这个项目是对 ant design upload 组件的扩展,

专用于 oss 前端直传!

支持以下文件的直传,预览,直接下载。

image/*,.pdf,.xls,.xlsx,.ppt,.pptx,.doc,.docx

注意: oss的key_id 和 oss的secret 需要填写自己的信息~

git地址: https://github.com/guanrongjia/ant-design-upload-extend

 

 安装:

yarn add ant-design-upload-extend 

或者: 

npm install ant-design-upload-extend 

使用方式:

<Uploader imageUrlExtend={{ 'x-oss-process': 'style/preview' }} 
        ossConfig={{accessKeyId: 'fake-4G2Huhqd3ByCdRczR9Lq', // oss的key_id
            accessKeySecret: 'fake-tp9yR1QIW4bGxukCKtX5yh79Gy', // oss的secret
            region: 'oss-cn-shanghai', // 地域节点
            bucket: 'xinglan', }}// bucket 名字
        antUploadParams={{accept: "image/*,.pdf,.xls,.xlsx,.ppt,.pptx,.doc,.docx",
            listType:"picture-card",
            className:"avatar-uploader",
            multiple:true}} 
        uploadTitle="请选择文件或图片"
        fileLimit={8 * 1024 * 1024} // 8M
        onSetFileList={(currentFileList) => { console.log('currentFileList', currentFileList) }}
    />

 

 

效果图

效果图

Ant Design Pro 表单组件中有一个上传组件可以用来上传图片,它是基于 Ant DesignUpload 组件进行封装的,具体使用方法如下: 1. 首先需要在页面中引入 Upload 组件: ```javascript import { Upload } from 'antd'; ``` 2. 在表单中使用 Upload 组件,例如: ```javascript <Form.Item label="图片上传"> <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="/upload.do" beforeUpload={beforeUpload} onChange={this.handleChange} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> </Form.Item> ``` 其中,`name` 表示上传的文件参数名称,`listType` 表示展示的样式(这里用的是图片卡片),`className` 表示自定义样式类名,`showUploadList` 表示是否展示已上传文件列表,`action` 表示上传的接口地址,`beforeUpload` 表示上传前的验证方法,`onChange` 表示上传状态变化的回调函数。 3. 在上传前进行验证,例如: ```javascript beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('只能上传JPG/PNG格式的图片!'); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { message.error('上传的图片必须小于2MB!'); return false; } return true; } ``` 在这个示例中,我们对上传的图片进行了格式和大小的验证,如果不符合要求就会提示错误信息。 4. 在上传状态变化时更新图片展示,例如: ```javascript handleChange = info => { if (info.file.status === 'uploading') { this.setState({ loading: true }); return; } if (info.file.status === 'done') { getBase64(info.file.originFileObj, imageUrl => { this.setState({ imageUrl, loading: false, }); }); } }; ``` 在这个示例中,我们根据上传的状态判断是否正在上传,如果是就显示加载中的状态,如果上传完成就将图片转换为 Base64 格式并展示出来。 上述是一个简单的上传图片组件的示例,你可以根据自己的需求进行调整和扩展
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值