HUI

# Upload 上传

# Upload 概述

文件选择上传和拖拽上传控件。

暂不支持 IE9 浏览器。

# Upload 代码示例

# 点击上传

最基本用法，点击上传，一次选择一个文件。

# 多选

设置属性 multiple，可以选择多个文件。

# 手动上传

绑定 before-upload，并返回 false，可以阻止默认上传流程，手动控制文件上传。

# 拖拽上传

设置属性 type 为 drag，可以拖拽上传。

# 自定义上传列表

可以自由控制上传列表，完成各种业务逻辑，示例是一个照片墙，可以查看大图和删除。

  • 设置属性 show-upload-list 为 false，可以不显示默认的上传列表。
  • 设置属性 default-file-list 设置默认已上传的列表。
  • 通过 on-success 等属性来控制完整的上传过程，详见 API。 另外，可以通过丰富的配置，来定制上传需求，本例中包含了：
    • 文件必须是 jpg 或 png 格式的图片。
    • 最多上传 5 张图片。
    • 每个文件大小不超过 2M。

# 手动上传

可以设置 selfConfig 属性进行手动上传

  • 设置 slot 属性 chooseFile 配置选择上传按钮，点击即可选择需上传文件。
  • 设置 slot 属性 postFile 配置开始上传按钮，点击可开始上传待上传文件。
  • 设置 slot 属性 cancleFile 配置取消上传按钮(注:配置了 chooseFile 及 postFile 后才能使用)，点击可取消待上传及正在上传中的文件。
  • 设置 slot 属性 showList 配置已上传列表按钮(注:配置了 chooseFile 及 postFile 后才能使用)，点击可查看已上传文件列表。

其中已上传列表中，点击隐藏按钮可隐藏已上传列表，点击关闭按钮可删除所有已上传的文件，点击单文件关闭按钮可删除当前文件。

# 清空已上传的文件列表

通过调用 clearFiles 方法清空已上传的文件列表

# 一次性上传所有文件及不同的上传交互

设置 selfConfig 及 uploadAll 一键上传所有文件
on-goto-add 表示第一次选择文件后返回 true 的状态，方便进行不同的交互
on-file-none 表示由上传成功、上传失败、或者文件清空导致文件列表为空时触发的响应，返回 success/error/clear

# 服务端代码实现示例(Java MVC)

@RequestParam(value = "file", required = true) 中 value 值必须与 upload 组件中 name 属性设置值保持一致

@ResponseBody
@RequestMapping(value = "/uploadfile")
public Map uploadfile(@RequestParam(value = "file", required = true) MultipartFile[] upfile) throws Exception {
    Map<String, String> map = new Hash Map<String, String>();
    if (upfile != null && upfile.length > 0) {
        // 循环获取file数组中得文件
        for (int i = 0; i < upfile.length; i++) {
            MultipartFile uploadFile = upfile[i];
            File source = new File(uploadFile.getOriginalFilename());// 文件
            String fileName = uploadFile.getOriginalFilename();
            //MultipartFile 转file
            uploadFile.transferTo( source );
            if (source.isFile()) {
                // todo
            }

        }
    }
    return map;
}

# mergeHook && multiple && beforeUpload

mergeHook && multiple允许多选批量处理场景下，当promise远程处理，返回的数组中存在不是文件格式的内容，则控制太提示错误信息

# Upload API

# Upload props

属性 说明 类型 默认值
action 上传的地址，必填[原生的请求,需要自行拼接服务端接口/header等属性配置请求头等]，注意前后端文件大小限制 String -
headers 设置上传的请求头部 Object {}
multiple 是否支持多选文件 Boolean false
data 上传时附带的额外参数 Object -
name 上传的文件字段名,必须与服务端保持一致 String file
with-credentials 支持发送 cookie 凭证信息绝大多数情况下必填 Boolean false
show-upload-list 是否显示已上传文件列表 Boolean true
type 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽） String select
accept 接受上传的文件类型 (opens new window) String -
format 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 Array []
max-size 文件大小限制，单位 kb Number -
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 Function -
on-progress 文件上传时的钩子，返回字段为 event, file, fileList Function -
on-success 文件上传成功时的钩子，返回字段为 response, file, fileList Function -
on-error 文件上传失败时的钩子，返回字段为 error, response, file Function -
on-preview 点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据 Function -
before-remove 文件列表移除文件前的钩子，入参为 file, fileList；返回值为布尔值，返回true继续移除，返回false取消移除(v1.0.36) Function -
on-remove 文件列表移除文件时的钩子，返回字段为 file, fileList Function -
on-format-error 文件格式验证失败时的钩子，返回字段为 file, fileList Function -
on-exceeded-size 文件超出指定大小限制时的钩子，返回字段为 file, fileList Function -
default-file-list 默认已上传的文件列表，例如： [ { name: 'img1.jpg', url: 'http://www.xxx.com/img1.jpg' }, { name: 'img2.jpg', url: 'http://www.xxx.com/img2.jpg' } ] Array []
selfConfig 配置手动上传 Boolean false
uploadAll 一次性上传所有文件(须同时设置selfConfig,仅在1.0.19版本及其以上使用)(1.0.24及其以上版本可以独立使用) Boolean false
on-self-success 自定义文件上传成功时的钩子（一次性处整个文件列表,而on-success是文件列表中每个文件均执行一次），返回字段为 response, 文件列表fileList(此属性仅在1.0.24及其以上版本使用) Function -
mergeHook 多选文件时，合并调用before-upload、on-format-error、on-exceeded-size等钩子(v1.0.43) Boolean false
textNowrap 文件名字文件名字太长，不换行，出现省略号，并且文件后缀文件格式不省略(v.1.0.74) 注意点：textNowrap为true时，uploadlist内容也不换行 不兼容ie10 Boolean false
errorTextList 新增失败交互，上传失败时自定义配置文案 Array [{uid: '', errorText: ''}]，uid为文件的uid，errorText为对应文件的错误信息，如果不设置，默认显示上传失败
showErrorlist 是否显示上传失败列表（v1.2.1） Boolean true
beforePostFile 设置selfConfig手动上传时的钩子，参数为上传的文件，若返回false则停止上传 Function -
selectNoPercent 当该属性配置为true时，且设置selfConfig为true时，先选择文件时不显示进度条 点击一次上传时才开始有进度条且成功或者失败后进度条都不消失（v1.7.0） Boolean false

# Upload methods

方法名 说明 参数
clearFiles 清空已上传的文件列表 无

# Upload events

事件名 说明 返回值
on-file-click 点击文件列表项触发，返回当前点击文件项(仅在1.0.25版本及其以上使用) file
on-goto-add 文件列表加入第一条数据时返回true，非第一条数据则不触发事件(仅在1.0.19版本及其以上使用) true
on-file-none 开启后，文件列表为空时返回置空的原因状态(包括上传成功置为空'success',上传失败置为空'error', 文件清空置为空'clear')(仅在1.0.19版本及其以上使用) error, success, clear

# Upload slot

名称 说明
无 触发上传组件的控件
tip 辅助提示内容
chooseFile 手动上传-选择上传文件按钮
postFile 手动上传-开始上传按钮
cancleFile 手动上传-取消上传按钮
showList 手动上传-已上传列表按钮
uploadlist 上传列表项自定义(此属性仅在1.0.25版本及其以上使用)