❤
npm
Sign UpSign In

zan-upload

7.0.3 • Public • Published

zan-upload

NPM

这是一个文件上传组件

使用方法

微商城

获取 token 接口由原来的 /dock/token.json 替换成以下几种获取 token 的方式：

  1. 微商城公开图片上传：/shop/pubImgUploadToken.json，会在我的文件中显示，图片上传常用接口
  2. 微商城公开音频上传：/shop/pubAudioUploadToken.json，会在我的文件中显示，音频上传常用接口
  3. 存储公开图片上传：/storage/pubImgUploadToken.json，不会在我的文件中显示，如店铺Logo
  4. 存储私有图片上传：/storage/priImgUploadToken.json，不会在我的文件中显示，如店铺认证

具体采用哪个接口可以根据各业务的需求，更多信息可以参考 http://doc.qima-inc.com/pages/viewpage.action?pageId=15168143

非微商城（如美业、餐饮等）

后端需要自己封装token接口

代码演示

:::demo 基础用法

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    uploadError(data) {
        console.log(data);
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    render() {
        return <Upload
            maxSize={8 * 1000 * 1000}
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	onSuccess={this.uploadSuccess} onError={this.uploadError} />;
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 仅上传本地图片

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    render() {
        return <Upload 
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	trigger={() => <span>xxx</span>} 
        	onSuccess={this.uploadSuccess} localOnly />;
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 素材银行，限制4张图片

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    state = {
        selectedItems: []
    };
 
    uploadSuccess = (data) => {
        this.setState({
            selectedItems: data
        });
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    render() {
        const { selectedItems } = this.state;
        return (
            <div>
                {selectedItems.map((item, index) => (
                    <img
                        key={index}
                        src={item.attachment_full_url}
                        width="80"
                        height="80"
                        style={{
                            display: 'inline-block',
                            marginRight: 10
                        }}
                    />
                ))}
                <Upload
            	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
                materials
                maxAmount={4}
                triggerInline
                imgcdn="https://img.yzcdn.cn"
                mediaListUrl="mock/upload-mediaList.json"
                categoryListUrl="mock/upload-categoryList.json"
            	onSuccess={this.uploadSuccess} />
            </div>
        );
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 上传音频，限制3个

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    render() {
        return <Upload 
            tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
            materials
            type="voice"
            maxAmount={3}
            maxSize={10 * 1024 * 1024}
            tokenUrl="https://materials.youzan.com/shop/pubAudioUploadToken.json"
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
            categoryListUrl="mock/upload-categoryList.json"
            onSuccess={this.uploadSuccess} />;
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 不需要额外传参数，通过tokenUrl修改token

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    render() {
        return <Upload 
            maxAmount={5} 
            tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
            materials
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
            onSuccess={this.uploadSuccess} 
            tokenUrl="https://materials.youzan.com/shop/pubImgUploadToken.json" />;
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 额外传递业务参数，通过onGetToken回调函数修改token

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    renderTrigger() {
        return <span></span>;
    }
 
    getTokenHandler() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('xxxx');
            }, 100);
        });
    }
 
    render() {
        return <Upload 
        	maxAmount={1} 
        	tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" 
        	materials
            imgcdn="https://img.yzcdn.cn"
            mediaListUrl="mock/upload-mediaList.json"
        	onSuccess={this.uploadSuccess} 
        	onGetToken={this.getTokenHandler} />;
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

:::demo 裁剪功能上传Logo

import Upload from 'zan-upload';
 
class Simple extends React.Component {
    uploadSuccess(data) {
        console.log(data); // eslint-disable-line
    }
 
    uploadError(data) {
        console.log(data);
    }
 
    render() {
        return <Upload
            clipping
            clippingUrl="https://img.yzcdn.cn/upload_files/2016/09/28/FskX-jOAV47z3QSPEJcwmgic5j8t.jpg"
            tips="建议尺寸：640 x 640 像素。"
            onSuccess={this.uploadSuccess}
            onError={this.uploadError}
            tokenUrl="https://materials.youzan.com/shop/pubImgUploadToken.json" />
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

:::

API

参数 说明 类型 默认值 是否必填
type 上传类型，默认为image，音频上传为voice string 'image' 否
kdtId 店铺id number 0 否
prefix 前缀命名空间 string 'rc' 否
className 扩展类名 string '' 否
inline 是否行内属性 boolean false 否
maxSize 图片大小限制，单位为b number 1024 * 1024 否
maxAmount 图片数量限制，0为不限制，1为只支持单文件 number 0 否
silent 是否开启静默模式，不会提示成功/失败 boolean false 否
tips 提示文案 string '' 否
localOnly 是否只支持本地图片 boolean false 否
materials 是否支持素材银行 boolean false 否
imgcdn 自定义素材银行图片cdn域名，默认为_global.url.imgqn_ string '' 否
categoryId 固定categoryId，不显示分组列表 any null 否
onSuccess 上传成功回调，返回的是一个数组 function noop 否
onError 上传失败回调 function noop 否
onProgress 上传进度 function noop 否
onGetToken 自定义获取token回调，需要返回一个promise，如 resolve(token) function 内置getToken 否
filterFiles 过滤文件，支持同步和promise的方式 function noop 否
accept 支持文件类型 string 'image/gif, image/jpeg, image/png' 否
scope 图片空间名 string 'kdt_img' 否
auto 是否自动弹出 boolean false 否
timeout 上传超时毫秒数 number 60 * 1000 否
mediaListUrl 自定义素材银行列表url [GET] string '//materials.youzan.com/media/mediaList.json' 否
categoryListUrl 自定义素材银行分组列表url [GET] string '//materials.youzan.com/category/categoryList.json' 否
fetchUrl 自定义提取网络图片url [POST] string '' 否
onFetchUrl 自定义提取图片的处理函数，需要返回一个promise func undefined 否
tokenUrl 自定义上传图片token的url [POST] string '' 否
uploadUrl 自定义上传图片url [POST] string '//upload.qbox.me' 否
triggerClassName 重写trigger样式 string 'rc-upload-trigger' 否
clipping 是否支持裁剪功能 boolean false 否
clippingUrl 裁剪功能默认展示预览图片 string '' 否
clippingTitle 裁剪Dialog标题 string '' 否
showIconTab 是否展示图标Tab页(在materials为true时) boolean false 否
iconListUrl 自定义提取icon的url [GET] string '//materials.youzan.com/icon/list.json' 否

更新日志

4.4.1 (2017-10-30)

  • 去掉 tokenUrl 和 fetchUrl 的默认值，这两个属性变更为必填项
  • 增加文件上传前的类型判断，防止修改文件名绕过input的类型过滤
  • 修复删除图片的 bug

4.5.1 (2017-10-31)

  • 升级的打包输出，只输出 lib 和 dist

4.5.2 (2017-11-01)

  • 手动引入 file-type，防止 es6 代码不编译

4.5.3 (2017-11-10)

  • 修复无法检测文件类型导致文件上传不了的问题

5.0.0 (2017-11-16)

  • 将 tokenUrl 和 fetchUrl 两个属性的默认值设置为''，非必填

5.0.1 (2017-11-20)

  • 修复无法上传同一张图片的bug

5.0.2 (2017-11-21)

  • 修复 FileInput 可能引发的报错
  • 为 onProgress 增加上传过程中的预览图片

5.0.4 (2017-11-27)

  • 素材银行分组增加localStorage缓存

5.1.0 (2017-11-28)

  • 增加对zent/upload的依赖，删除部分多余代码

5.2.0 (2017-11-29)

  • 修复获取线上图片的bug
  • 增加列表的搜索功能
  • 素材银行样式优化

5.2.1 (2017-12-01)

  • 素材银行样式优化

5.3.0 (2017-12-05)

  • 调整素材银行选择图片/语音逻辑：最大选择数量为1时逻辑不变；最大选择数量超过1时，增加选择序号，超过最大数量后仅提示，不自动取消先选中的图片

5.3.1 (2017-12-15)

  • 修复上传进度丢失的bug

5.3.5 (2018-01-04)

  • 素材银行支持翻页选择
  • 对话框改成mask点击不消失，防止误操作

5.3.6

  • 修复上传错误信息获取不正确的问题

5.3.7

  • 支持图片裁剪上传Logo功能

5.5.0

  • icon图标库上线

6.0.2

  • 修复音频选择超出maxAmount的提示文案

Readme

Keywords

none

Package Sidebar

Install

npm i zan-upload

Weekly Downloads

44

Version

7.0.3

License

MIT

Unpacked Size

114 kB

Total Files

15

Last publish

Collaborators

  • huangshiyu
  • huangsy1412
  • jinfeng
  • lichen
  • ronghang
  • youzan-lc
  • zhangzhelun
Try on RunKit
Report malware