uploadimage

• 作者：fuhebo
• 邮箱：[email protected]
• 版本：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不上传) } |

注意事项

• 组件注意事项

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.2.0

1. update react to version 16