https://github.com/future-team/eg-upload
eagle-ui上传组件
https://github.com/future-team/eg-upload
Last synced: about 2 months ago
JSON representation
eagle-ui上传组件
- Host: GitHub
- URL: https://github.com/future-team/eg-upload
- Owner: future-team
- License: mit
- Created: 2016-05-09T06:57:25.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-07-24T03:30:18.000Z (almost 7 years ago)
- Last Synced: 2025-10-19T22:40:46.919Z (9 months ago)
- Language: JavaScript
- Size: 440 KB
- Stars: 2
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eg-upload
这是一款基于eagle-ui开发的上传文件组件；
## UI展示
## 使用
```js
import {Upload} from 'eg-upload';
import React, { Component ,PropTypes} from 'react';
import ReactDom from 'react/lib/ReactDOM';
//completeCallback 全部上传完成
//successCallback 单张上传成功 会执行多次
//failureCallback 上传失败
ReactDom.render(
{}}
completeCallback={()=>{}}
failureCallback={(file,data)=>{}}
filter={()=>{}}
uploadBtnText="选择上传文件"
/>,
document.getElementById('root')
);
```
## API
### props
- `uploadUrl`：提交服务器地址；
- `maxSize`：允许上传文件大小；
- `maxNumber`：文件最大上传数量；
- `minNumber`：文件最少上传数量；
- `uploadBtnText`：上传按钮文案；
- `maxNumberMessage`：超出范围的提示文案；
- `egSize`：上传按钮大小（default、xs、sm、lg）;
- `egStyle`：上传按钮颜色（error、warning、danger、link、gray、white、success、''）；
- `width`：略缩图容器的宽度；
- `height`：略缩图容器的高度；
- `thumbWidth`：略缩图宽度；
- `thumbHeight`：略缩图高度；
### callback
- `completeCallback(successImageList,imageListSize)`：上传单个文件成功后和删除文件后执行的方法，`successImageList`上传成功后的文件列表，`imageListSize`一共选择多少个文件；
- `failureCallback(file,responseText)`：上传单个文件失败后执行，`file`失败后的文件，`responseText`失败信息，由服务端返回；
- `successCallback(file,data)`：单个文件上传成功后执行，`file`上传成功的文件，`data`服务端返回的json数据；
- `renderItemCallback(files)`：返回自定义略缩图模板，用户可自定义容器中显示的内容模板，该方法的作用域为upload对象本身，`files`需要显示的文件列表，
```js
renderItemCallback([
index:file.index,//文件的索引
name:file.name,//文件的名字
result:'',//base64
type:file.type//类型
])
```
- `filter(files,maxSize)`：过滤不允许上传的文件
```js
filter=(files,maxSize)=>{
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
arrFiles.push(file);
if (file.type.indexOf("image") == 0) {
if (file.size >= maxSize) {
alert(`您这张${file.name}图片大小过大，应小于${maxSize}k`);
} else {
arrFiles.push(file);
}
} else {
alert('文件"' + file.name + '"不是图片。');
}
}
return arrFiles;
}
```
## 项目示例
下载项目到本地安装依赖包后执行 **npm run demo** 即可查看示例演示。