上传 Upload
issue

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

何时使用

代替原生 input type='file'

如何使用

import { Upload } from 'tinper-bee';

or

import Upload from 'bee-upload';
import 'bee-upload/build/Upload.css';

能力特性

API

参数 说明 类型 默认值
accept 接受上传的文件类型, 详见 input accept Attribute string
name 发到后台的文件参数名 string 'file'
defaultFileList 默认已上传的文件列表 object[] -
fileList 已上传的文件列表,多用于onChange事件里 array -
action 上传的服务器地址 string (file) => Promise
data 上传所需参数或返回上传参数的方法 object (file) => object
size 上传文件的大小限制单位是byte number 1024000
headers 设置请求的头部信息 兼容ie10以上 object -
showUploadList 是否展示文件列表, 可设为一个对象,用于单独设定 showPreviewIconshowRemoveIcon Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } true
multiple 是否支持多文件上传 兼容ie10以上 bool false
accept 设置文件接收类型 string -
beforeUpload 上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 FileBlob 对象则上传 resolve 传入对象)。注意:IE9 不支持该方法。 (file, fileList) => `boolean Promise`
customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function -
onChange 当上传状态改变之后执行的回调函数 Function -
listType 内置的样式,支持text和picture string 'text'
onRemove 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。 Function(file): boolean Promise
supportServerRender 服务端渲染时需要打开这个 boolean false
disabled 是否禁用,设置为 true 后前端禁止删除已上传文件 boolean false
withCredentials 上传请求时是否携带 cookie boolean false
enterDragger 拖拽上传,当鼠标拖拽文件进入 Dragger 区域时触发 Function -
leaveDragger 拖拽上传,当鼠标拖拽文件离开 Dragger 区域时触发 Function -

onChange

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

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

注意事项

暂无

更新日志

  • v2.1.1 2020-01-17 ( release地址 )

    • bee-upload @2.1.1
      • [ Feature ] 增加enterDragger、leaveDragger钩子函数。
  • v2.0.4 2019-10-11 ( release地址 )

    • bee-upload @2.0.4
      • [Fixbug]删除按钮样式不对。
      • [Fixbug]onRemove 返回值为 false 时,依然可以删除。
  • v2.0.2 2019-09-21 ( release地址 )

    • bee-upload @2.0.2
      • [Feature]支持自定义属性。
  • v2.0.1 2019-09-09 ( release地址 )

    • bee-upload @2.0.1
      • [Feature]新增 disabled API,用于禁止上传、删除已上传列表行为。
      • [Feature]listType API 新增 picture-card 类型,支持图片预览及删除功能。