zan-upload

![NPM](http://npm.qima-inc.com/package/zan-upload)

这是一个文件上传组件

$3

#### 微商城

获取 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接口

$3

:::demo 基础用法
``js 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 ; }

render() { return maxSize={8 1000 1000} tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" onSuccess={this.uploadSuccess} onError={this.uploadError} />; } }

ReactDOM.render( , mountNode );

`:::

:::demo 仅上传本地图片`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

render() { return tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" trigger={() => xxx} onSuccess={this.uploadSuccess} localOnly />; } }

ReactDOM.render( , mountNode );

`:::

:::demo 素材银行，限制4张图片`js import Upload from 'zan-upload';

class Simple extends React.Component { state = { selectedItems: [] };

uploadSuccess = (data) => { this.setState({ selectedItems: data }); }

renderTrigger() { return ; }

render() { const { selectedItems } = this.state; return (


                {selectedItems.map((item, index) => (
                                            key={index}
                        src={item.attachment_full_url}
                        width="80"
                        height="80"
                        style={{
                            display: 'inline-block',
                            marginRight: 10
                        }}
                    />
                ))}
                            	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} />


        );
    }
}
ReactDOM.render(
    
    , mountNode
);

`:::

:::demo 上传音频，限制3个`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

render() { return 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( , mountNode );

`:::

:::demo 不需要额外传参数，通过tokenUrl修改token`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

render() { return 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( , mountNode );

`:::

:::demo 额外传递业务参数，通过onGetToken回调函数修改token`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

getTokenHandler() { return new Promise(resolve => { setTimeout(() => { resolve('xxxx'); }, 100); }); }

render() { return 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( , mountNode );

`:::

:::demo 裁剪功能上传Logo`js 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 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( , mountNode );

`:::

`$3`

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | |------|------|------|--------|--------| | 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'`| 否 |

$3

#### 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的提示文案

zan-upload

![NPM](http://npm.qima-inc.com/package/zan-upload)

这是一个文件上传组件

$3

#### 微商城

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

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

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

后端需要自己封装token接口

$3

:::demo 基础用法
``js 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 ; }

render() { return maxSize={8 1000 1000} tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" onSuccess={this.uploadSuccess} onError={this.uploadError} />; } }

ReactDOM.render( , mountNode );

`:::

:::demo 仅上传本地图片`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

render() { return tips="建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。" trigger={() => xxx} onSuccess={this.uploadSuccess} localOnly />; } }

ReactDOM.render( , mountNode );

`:::

:::demo 素材银行，限制4张图片`js import Upload from 'zan-upload';

class Simple extends React.Component { state = { selectedItems: [] };

uploadSuccess = (data) => { this.setState({ selectedItems: data }); }

renderTrigger() { return ; }

render() { const { selectedItems } = this.state; return (


                {selectedItems.map((item, index) => (
                                            key={index}
                        src={item.attachment_full_url}
                        width="80"
                        height="80"
                        style={{
                            display: 'inline-block',
                            marginRight: 10
                        }}
                    />
                ))}
                            	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} />


        );
    }
}
ReactDOM.render(
    
    , mountNode
);

`:::

:::demo 上传音频，限制3个`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

ReactDOM.render( , mountNode );

`:::

:::demo 不需要额外传参数，通过tokenUrl修改token`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

ReactDOM.render( , mountNode );

`:::

:::demo 额外传递业务参数，通过onGetToken回调函数修改token`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

renderTrigger() { return ; }

getTokenHandler() { return new Promise(resolve => { setTimeout(() => { resolve('xxxx'); }, 100); }); }

ReactDOM.render( , mountNode );

`:::

:::demo 裁剪功能上传Logo`js import Upload from 'zan-upload';

class Simple extends React.Component { uploadSuccess(data) { console.log(data); // eslint-disable-line }

uploadError(data) { console.log(data); }

ReactDOM.render( , mountNode );

`:::

`$3`

$3

#### 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)

#### 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的提示文案

zan-upload

Dist Tags

zan-upload

$3

$3

`$3`

$3

zan-upload

Dist Tags

zan-upload

$3

$3

`$3`

$3