ant design upload 组件的扩展

最新推荐文章于 2024-08-05 23:30:12 发布

gaunjia

最新推荐文章于 2024-08-05 23:30:12 发布

阅读量605

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/u013302113/article/details/108475860

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

这个项目是对 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) }}
    />

效果图