Lm-uploadimage NPM

uploadimage

作者：fuhebo
邮箱：fuhebo@58ganji.com
版本：0.2.0

介绍

图片上传

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-uploadimage --save

如果你还没有安装 npm，可通过以下方式进行安装。
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

待开发

使用

最少配置参数为：

传入fieldId与组件绑定
onDelete 删除的回调
onSuccess 上传成功后的回调
onError 发生错误时的回调
fileInfo 资源的url

<UploadImage 
        fieldId={ 'filed3' }
        onSuccess={ this.onSuccess }
        onDelete={ this.onDelete }
        onError={ this.onError }
        fileInfo= { '' } />

配置参数

Prop	Type	Default	Description
`fileInfo`	`string \|\| array`	`undefined`	文件信息
`loadingType`	`string`	`loading`	加载中的样式【loading, progress, all, none】
`isFileList`	`bool`	`false`	是否是文件列表
`fieldId`	`string`	`undefined`	字段ID或文件上传时的key
`uploadKey`	`string`	`undefined`	对应到文件上传是的key
`accept`	`string`	`image/*`	input中accept属性
`multiple`	`bool`	`false`	是否可多选
`beforeUpload`	`func`	`undefined`	上传之前的回调 (file) => boolean	object(设置压缩相关属型)	Promise
`afterCompress`	`func`	`undefined`	压缩成功后的回调 (base64) => false(不上传)	other(继续上传)
`customUpload`	`func`	`null`	自定义上传 (filedId, uploadInfo)
`disabled`	`bool`	`false`	是否禁用上传以及预览中的删除(也列表中的删除按钮)
`action`	`string`	`undefined`	上传的url
`data`	`object \|\| func`	`undefined`	上传附带的其他提交信息(func可返回promise)
`headers`	`object`	`undefined`	设置xhr的header
`onStart`	`func`	`undefined`	xhr send之前的回调
`onProgress`	`func`	`undefined`	上传进度回调 (fieldId, e, uid)
`onSuccess`	`func`	`() => {}`	上传成功后的回调 (fieldId, ret, fileInfo)
`onError`	`func`	`() => {]`	失败后的回调 (fieldId, e, fileInfo)
`onDelete`	`func`	`() => {}`	删除后的回调 (field, uid) => { return bool(false 不关闭预览)	promise }
`onAdd`	`func`	`() => {}`	添加列表的一个项 (fieldId, fileInfo) 非列表时可不传
`withCredentials`	`bool`	`undefined`	允许跨域发送cookie
`appUpload`	`func`	`undefined`	调用app上传 (fieldId)
`className`	`string`	`undefined`	自定义class
`hasDeleteInList`	`bool`	`false`	列表中是否显示删除
`opacity`	`number`	`5`	预览的背景透明度
`maxUploadNumber`	`number`	`1`	最大可上传张数
`onInputChange`	`func`	`undefined`	触发input的onChange时的回调函数(fieldId, files) => { return 处理后的files	false 不上传	promise(resolve的内容上传， reject不上传) }