上传文件 KLUpload

基本形式

目前该上传组件采用FormData向后台提交文件数据
组件上传成功依赖的返回数据结构为{name: 'xxx', url: 'xxx'}, 通常和后端接口不一致，可以通过配置onLoadInterceptor做一层数据转换

可通过file-list指定初始值，格式为[Object], 其中Object结构如下

{
    name: '文件名称',
    url: '文件的路径',
    flag: '0, 新增的文件; 1, 已经上传未被删除的文件，2，已经上传被删除的文件'
}

特别注意: 例子中使用的url为私人服务器, 请勿直接使用, 请使用自己后台的上传接口

<kl-upload action='https://nos.kaolafed.com/upload' file-list={list} onLoadInterceptor={this.onLoadInterceptor} on-preview={this.onPreview($event)}></kl-upload>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
            name: 'Game.jpg',
            url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
            name: 'Kaola.jpg',
            url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
            name: 'Music.jpg',
            url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    onPreview: function(e) {
        if(e.file.type === 'pdf') {
            window.open(e.file.url);
        }
    }
    //transform {code: 200, data: {...}} to {name: 'xxx', url: 'xxx'}
    /*onLoadInterceptor: function(json){
      if(json.code == 200){
        var data = json.data || {};
        if(Array.isArray(data)){
            data = data[0];
        }
        return data;
      }
      return false;
    }*/
});

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

<kl-upload action='https://nos.kaolafed.com/upload' list-type="card"></kl-upload>

多选上传

<kl-upload action='https://nos.kaolafed.com/upload' multiple={true}></kl-upload>

文件类型限制

配置accept属性为文件后缀或MIME_TYPE

<kl-upload action='https://nos.kaolafed.com/upload' accept=".jpg,.zip,video/*,audio/*"></kl-upload>

文件大小限制

<kl-upload action='https://nos.kaolafed.com/upload' max-size="2K"></kl-upload>

文件个数限制

<kl-upload action='https://nos.kaolafed.com/upload' num-max={2}></kl-upload>

行布局

<kl-upload action='https://nos.kaolafed.com/upload' file-list={list} num-perline={2}></kl-upload>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    }
});

只读模式

<kl-upload action='https://nos.kaolafed.com/upload' file-list={list} readonly={true}></kl-upload>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.JPG',
          url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg',
          class: 'my-img-test'
        }, {
          name: 'Kaola.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    }
});

指定宽高或宽高比

只作用于图片

<kl-upload action='https://nos.kaolafed.com/upload' image-width={20} ></kl-upload>
<kl-upload action='https://nos.kaolafed.com/upload' image-height={20} ></kl-upload>
<kl-upload action='https://nos.kaolafed.com/upload' image-scale='4:3' ></kl-upload>

拖拽上传

<kl-upload action='https://nos.kaolafed.com/upload' drag={true} ></kl-upload>

文件上传前的校验（文件格式限制为图片）

<kl-upload action='https://nos.kaolafed.com/upload' file-list={list} before-upload={this.beforeUpload}></kl-upload>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    beforeUpload: function(file) {
        var fileTypeCheck = function(resolve) {
            var msg = '';
            if (!/image\/.*/.test(file.type)) {
                msg = '格式错误';
            }
            resolve(msg);
        };
        return new Promise(fileTypeCheck);
    }
});

文件删除前的确认

<kl-upload action='https://nos.kaolafed.com/upload' file-list={list} before-remove={this.beforeRemove}></kl-upload>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    beforeRemove: function(item) {
        var file = item.file;
        var removeConfirm = function(resolve) {
            var modal = NEKUI.KLModal.confirm('确认删除' + file.name + '?');
            modal.$on('ok', () => resolve(true));
        };
        return new Promise(removeConfirm);
    }
});

选择文件后不上传

该模式下，必须初始化formData属性为new FormData()默认值

<kl-upload file-list={list} autoUpload={false} formData={formData}></kl-upload>
<kl-button title="上传" on-click={this.upload()}></kl-button>

var component = new NEKUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://kaola-haitao.oss.kaolacdn.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }],
        formData: new FormData()
    },
    upload: function(){
      var ajax = new XMLHttpRequest();
      ajax.open('json', '/upload');
      ajax.send(this.data.formData);  
    }
});

API

KLUpload

Param	Type	Default	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"`	=> 可选，上传的文件字段名, 默认为’file’
[options.data.headers]	`object`		=> 可选，设置上传的请求头部
[options.data.with-credentials]	`object`	`false`	=> 可选，支持发送 cookie 凭证信息, 默认false
[options.data.multiple]	`boolean`	`false`	=> 可选，是否支持多选, 可选值true/false，默认false单选
[options.data.data]	`object`		=> 可选，上传时附带的额外参数
[options.data.drag]	`boolean`	`false`	=> 可选，是否支持拖拽上传，可选值true/false，默认false不支持拖拽
[options.data.accept]	`string`	`"*"`	=> 可选，接受上传的文件类型, 同input的accept属性
[options.data.list-type]	`string`	`"list"`	=> 可选，上传组件的展示形式, 可选值list/card，默认list
[options.data.num-min]	`number`	`-Infinity`	=> 可选，指定的至少上传的文件个数，默认无限制
[options.data.num-max]	`number`	`Infinity`	=> 可选，最大允许上传文件的个数，默认无限制
[options.data.num-perline]	`number`		=> 可选，每行展示的文件个数，对于列表形式，默认无限制，根据父容器自动折行；对于表单形式，默认每行展示5个
[options.data.max-size]	`string`	`"1GB"`	=> 可选，上传文件大小的最大允许值, 支持数值大小以及KB,MB,GB为单元的指定
[options.data.readonly]	`boolean`	`false`	=> 可选，是否开启预览模式，可选值true/false，true预览模式，只能预览和下载图片，默认false，允许上传和删除图片
[options.data.hideTip]	`boolean`	`false`	=> 是否显示校验错误信息，默认false显示
[options.data.image-width]	`number`		=> 可选，指定上传图片文件的宽度, 值为数值，单位为px，如800
[options.data.image-height]	`number`		=> 可选，指定上传图片文件的高度, 值为数值，单位为px, 如600
[options.data.image-scale]	`string`		=> 可选，指定上传图片文件的宽高比, 值为冒号分隔的宽高比例字符串，如’4:3’
[options.data.class]	`string`		=> 可选，组件最外层包裹元素样式扩展
[options.data.onLoadInterceptor]	`function`	`NULL`	=> 可选，Http status介于200-300时触发，用于对响应数据拦截，response.code校验决定成功或失败，以及数据转换，详见demo基本形式
[options.data.onErrorInterceptor]	`function`	`NULL`	=> 可选，Http status非200-300时触发，http状态失败的钩子
[options.data.before-upload]	`function`		=> 可选，上传文件前的钩子，参数为上传的文件，返回同步校验信息或 Promise 对象，最终返回文件的字符串校验信息，如果为空，则继续进行文件的后续校验，如果非空，则提示校验信息，并停止上传
[options.data.before-remove]	`function`		=> 可选，删除文件时的钩子，参数结构同remove回调函数，返回同步删除确认信息或者 Promise 对象，最终返回的确认信息，如果为false，则停止删除；否则删除改文件
[options.data.autoUpload]	`boolean`	`false`	=> 可选，选择文件后是否立即上传，如果设置为false, 新增文件的数据会维护在formData属性中
[options.data.formData]	`FormData`	`FormData`	=> 可选，在autoUpload为false（非自动上传）模式下，新增文件的formData格式数据。注：此处使用时，必须在外部初始化formData默认值，否则无法实现三层的双向数据绑定

preview 上传预览点击事件Event

Param	Type	Description
sender	`object`	当前上传文件的实例
file	`object`	当前上传的文件
fileList	`array`	所有展示的文件列表
status	`string`	上传的状态
progress	`string`	上传的进度

success 文件上传成功回调函数Event

Param	Type	Description
sender	`object`	当前上传文件的实例
file	`object`	当前上传的文件
fileList	`array`	所有展示的文件列表
status	`string`	上传的状态
progress	`string`	上传的进度

progress 文件上传进度回调函数Event

Param	Type	Description
sender	`object`	当前上传文件的实例
file	`object`	当前上传的文件
fileList	`array`	所有展示的文件列表
status	`string`	上传的状态
progress	`string`	上传的进度

error 文件上传失败回调函数Event

Param	Type	Description
sender	`object`	当前上传文件的实例
file	`object`	当前上传的文件
fileList	`array`	所有展示的文件列表
status	`string`	上传的状态
progress	`string`	上传的进度

remove 上传文件删除回调函数Event

Param	Type	Description
sender	`object`	当前上传文件的实例
file	`object`	当前上传的文件
fileList	`array`	所有展示的文件列表
status	`string`	上传的状态
progress	`string`	上传的进度