代码演示

注

目前该上传组件采用FormData向后台提交文件数据。

基本展示形式（列表形式）, 用于表单上传

<kl-upload action='your_upload_address'></kl-upload>

卡片展示形式，用于表格上传

<kl-upload action='your_upload_address' list-type="card"></kl-upload>

基本展示形式，配置多选上传

<kl-upload action='your_upload_address' multiple={true}></kl-upload>

卡片展示形式，配置多选上传

<kl-upload action='your_upload_address' list-type="card" multiple={true}></kl-upload>

文件类型限制

<kl-upload action='your_upload_address' file-list={list} accept=".jpg,.zip,video/*,audio/*"></kl-upload>

文件大小限制

<kl-upload action='your_upload_address' max-size="830M"></kl-upload>

每行展示文件个数和总文件个数限制

<kl-upload action='your_upload_address' multiple={true} num-limit={15} num-perline={4}></kl-upload>

带有已上传文件的形式

<kl-upload action='your_upload_address' file-list={list}></kl-upload>
var component = new NEKUI.Component({
    template: template,
    data: {
        list: [
            {
                name: 'kaola-logo.jpeg',
                url: 'http://haitao.nos.netease.com/264271ddbec447288f17aef71119b1f4.png?imageView&thumbnail=220x0&quality=85&v=1'
            },
            {
                name: '权限申请交互.rar',
                url: 'http://jira.netease.com/secure/attachment/176692/%E6%9D%83%E9%99%90%E6%89%B9%E9%87%8F%E7%94%B3%E8%AF%B7%E4%BA%A4%E4%BA%92-%E7%94%B3%E8%AF%B7%E7%AF%AE.rar'
            },
            {
                name: 'app-2dcode.jpeg',
                url: 'http://mm.bst.126.net/images/index/2dcode-app.jpg'
            }
        ]
    }
});

API

KLUpload

Kind: global class
Extend: Component

new KLUpload()

Param Type Description
[options.data] object = 绑定属性
[options.data.action] string => 必选，上传地址
[options.data.file-list] array => 上传的文件列表, 可以指定初始值，代表已经上传的文件，见demo，每次操作文件后， 都可以通过该参数绑定的变量，得到最新的文件列表，其中每个文件项包含下面的字段: name: 文件名称 url: 文件的路径 flag: 0, 新增的文件; 1, 已经上传未被删除的文件，2，已经上传被删除的文件
[options.data.name] string => 可选，上传的文件字段名, 默认为’file’
[options.data.multiple] boolean => 可选，是否支持多选, 可选值true/false，默认false单选
[options.data.drag] boolean => 可选，是否支持拖拽上传，可选值true/false，默认false不支持拖拽
[options.data.accept] string => 可选，接受上传的文件类型, 同input的accept属性
[options.data.list-type] string => 可选，上传组件的展示形式, 可选值list/card，默认list
[options.data.num-limit] number => 可选，最大允许上传文件的个数，默认10个
[options.data.num-perline] number => 可选，每行展示的文件个数，默认每行展示5个
[options.data.max-size] number => 可选，上传文件大小的最大允许值, 支持数值大小以及KB,MB,GB为单元的指定
[options.data.deletable] boolean => 可选，上传文件是否允许删除, 可选值true/false，默认true，可删除
复选框 →
想让文档更完善？ 来 GitHub 提个 PR 吧！