APIbeta

FileUploader

Introduce

以 multipart/form-data 格式上传; 完整上传原始图片.

props

常规属性

名称 描述 类型 可选值 默认值
coverUrl 封面 string — —
serverUrl 上传服务器的地址 string - -
accept 接受文件的类型 string —
maxFileSize 允许上传的最大文件字节数.0表示无限制 number — 0
timeout 上传超时 number — 10000
disabled 是否禁用 boolean — false
httpHeaders 上传时的请求headers对象 map — -
crossDomain 是否跨域 boolean - true
withCredentials 是否附带cookie boolean - true
breakpointResume 用于断点续传 (file: File, crc32: number, cb: (sliceOffset: number) => void) => void; -
tip 提示文字 string — 点击上传
enableDragFile 打开拖拽文件特性 boolean — false
textErrFileNotFound 未选择文件错误提示 string - 未选择文件!
textErrFileSizeExceed 选择的文件大小超出最大值错误提示 string - 选择的文件大小超出最大值!
textErrFileHashError 计算文件哈希值时发生错误错误提示 string - 计算文件哈希值时发生错误,请重新选择文件!
textErrNetError 网络错误错误提示 string - 网络错误,请稍后重试!

events

事件名称 说明 回调参数
uploadSuccess 上传成功返回图片地址 (serverData: any)
uploadProgress 上传进度 (percent: number)
uploadError 上传出错 (err: any)

错误信息

当上传发生错误时, err会等于下列值:

错误信息 说明
FILE_NOT_FOUND:string 未选择文件
FILE_SIZE_EXCEED:string 选择的文件大小超出允许的大小值
FILE_HASH_ERROR:string 验算文件hash值时出错
NET_ERROR:string 网络错误
e:Error 任意的错误对象表明其他错误

methods

方法名称 说明
reset() 重置上传组件
browseFile() 打开浏览文件对话框

example

示例代码.

1
<bp-file-uploader serverUrl="http://127.0.0.1:8080/upload" />

服务端适配

客户端请求

服务端响应

断点续传

1
<bp-file-uploader :breakpointResume="handleBreakpointResume" />

使用breakpointResume属性传递断点续传方法, 在文件开始上传前, 通过回调告知需要开始上传的偏移地址.

1
2
3
4
5
6
7
8
9
10
function handleBreakpointResume(
  file: File, 
  crc32: number, 
  cb: (sliceOffset: number) => void
):void {
  // check file segment.

  // callback.
  cb(0);
}

自定义主题

图标

组件使用到的图标有:

图标名称 描述
bp-uploader_add 上传组件中的+图标, 表明点击开始选择上传文件
bp-uploader_cancel 上传时的取消按钮图标

可以使用bpui.icons.registerSvgIcon方式, 进行组件图标自定义

样式结构

组件的样式结构如下:

1
2
3
4
5
6
7
8
9
.bp-uploader {
  /* 进度条 */
  .bp-uploader__progress {}
  /* 主内容块 */
  .bp-uploader__file-content-main {
    /* 图片预览 */
    .bp-uploader__cover {}
  }
}

scss样式文件存放在@bpui/uploder/style 目录下, 可以复制修改以定制主题

← Uploader