README
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 |
afterCompress |
func |
undefined |
压缩成功后的回调 (base64) => false(不上传) |
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 不关闭预览) |
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 |
注意事项
- 组件注意事项
开发调试
进入项目目录后,使用 node
命令启动服务
npm run start
打包发布可通过 node
命令执行
npm run build
npm publish
相关资料
Changelog
0.1.0
- init
0.2.0
- update react to version 16