bee-upload
upload ui component for react
Last updated 6 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-upload 
SYNC missed versions from official npm registry.

bee-upload

npm version Build Status devDependency Status

通过Upload可以将资源(web page,text,picture,video...)传到远程服务器

使用

使用单独的Upload包

组件引入

先进行下载Upload包

npm install --save bee-upload

组件调用

import { Upload } from 'bee-upload';

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      console.log(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      console.log(`${info.file.name} file upload failed.`);
    }
  },
};

class Demo1 extends Component {
	render(){
		return( 
			<Upload {...props}>
        <Button type="primary" shape="border">
          <Icon type="upload" /> Click to Upload
        </Button>
      </Upload>
		)
	}
}

React.render(<Demo1 />, document.getElementById('target'));

样式引入

  • 可以使用link引入dist目录下upload.css
<link rel="stylesheet" href="./node_modules/build/bee-upload.css">
  • 可以在js中import样式
import "./node_modules/src/Upload.scss"
//或是
import "./node_modules/build/bee-upload.css"

API

参数 说明 类型 默认值
name 文件名 string file
defaultFileList 默认已上传的文件列表 array -
fileList 已上传的文件列表,多用于onChange事件里 array -
action 上传的服务器地址 array -
data 上传参数或者函数 Object or function -
size 上传文件的大小限制单位是byte number 1024000
headers 设置请求的头部信息 兼容ie10以上 object -
showUploadList 是否显示上传列表 bool true
multiple 是否支持多文件上传 兼容ie10以上 bool false
accept 设置文件接收类型 string -
beforeUpload 在上传之前执行的函数,当Promise返回false或者被拒绝,函数被中指。不兼容老ie func -
customRequest 覆盖默认的XHR,可定制自己的XMLHttpRequest func -
onChange 当上传状态改变之后执行的回调函数 func -
onPreview 点击预览时执行的回调方法,参数为当前点击的上传文件对象,若要阻止默认预览需return false func -
preventDefaultPreview 点击预览时,如果要阻止默认预览请设置为true,默认值为false func -
listType 内置的样式,支持text和picture string 'text'
onRemove 当删除按钮点击后触发的回调函数 func -
supportServerRender 当服务器正在渲染时,是否需要打开 bool false

onChange

当文件正在上传,上传成功和上传失败触发的回调函数。 当上传状态发生变化,返回下列参数。

{
  file: {
	   uid: 'uid',      // 唯一性id
	   name: 'xx.png'   // 文件名
	   status: 'done',  // 参数:uploading, done, error, removed
	   response: '{"status": "success"}',  // 服务器返回的参数
	},
  fileList: [ /* ... */ ], //当前文件列表
  event: { /* ... */ }, //服务器响应:包括上传进度  不兼容老的浏览器
}

IE兼容

IE8/9 Note

下载弹出窗口问题

使用iframe方式上传时,响应response的content-type应该是 text/plain或者 text/html.referense

此外,在iframe模式下,响应的状态应始终为200 OK,否则可能会在IE 8/9中获得Access被拒绝的错误。

域问题

如果页面设置document.domain,则服务器应根据_documentDomain参数输出document.domain

var ret = '';
if (postData._documentDomain) {
  ret += '<script>document.domain="'+postData._documentDomain+'";</script>';
}
this.body = ret + '{"url":"xx.jpq"}';

开发调试

$ git clone https://github.com/tinper-bee/bee-upload
$ cd bee-upload
$ npm install
$ npm run dev

Current Tags

  • 2.0.5-alpha.2                                ...           alpha (a year ago)
  • 2.1.3                                ...           latest (6 months ago)

37 Versions

  • 2.1.3                                ...           6 months ago
  • 2.1.2                                ...           6 months ago
  • 2.1.1                                ...           9 months ago
  • 2.1.0                                ...           9 months ago
  • 2.0.8                                ...           10 months ago
  • 2.0.7                                ...           10 months ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.5-alpha.2                                ...           a year ago
  • 2.0.5-alpha.1                                ...           a year ago
  • 2.0.5-alpha.0                                ...           a year ago
  • 2.0.4                                ...           a year ago
  • 2.0.4-alpha.0                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.3-alpha.0                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.1-alhpa.2                                ...           a year ago
  • 2.0.1-alpha.1                                ...           a year ago
  • 2.0.1-alpha.0                                ...           a year ago
  • 2.0.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.1.0-alpha.0                                ...           2 years ago
  • 1.0.0                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
Downloads
Today 11
This Week 42
This Month 366
Last Day 31
Last Week 242
Last Month 1,091
Dependencies (7)
Dev Dependencies (14)

Copyright 2014 - 2016 © taobao.org |