基本形式

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

<jr-upload action='https://nos.kaolafed.com/upload' file-list={list} onLoadInterceptor={this.onLoadInterceptor}></jr-upload>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
            name: 'Game.jpg',
            url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
            name: 'Kaola.jpg',
            url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
            name: 'Music.jpg',
            url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    //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;
    }*/
});

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

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

多选上传

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

文件类型限制

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

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

文件大小限制

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

文件个数限制

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

行布局

<jr-upload action='https://nos.kaolafed.com/upload' file-list={list} num-perline={2}></jr-upload>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    }
});

只读模式

<jr-upload action='https://nos.kaolafed.com/upload' file-list={list} readonly={true}></jr-upload>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    }
});

指定宽高或宽高比

只作用于图片

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

拖拽上传

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

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

<jr-upload action='https://nos.kaolafed.com/upload' file-list={list} before-upload={this.beforeUpload}></jr-upload>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    beforeUpload: function(file) {
        var fileTypeCheck = function(resolve) {
            var msg = '';
            if (!/image\/.*/.test(file.type)) {
                msg = '格式错误';
            }
            resolve(msg);
        };
        return new Promise(fileTypeCheck);
    }
});

文件删除前的确认

<jr-upload action='https://nos.kaolafed.com/upload' file-list={list} before-remove={this.beforeRemove}></jr-upload>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }]
    },
    beforeRemove: function(item) {
        var file = item.file;
        var removeConfirm = function(resolve) {
            var modal = JRUI.JRModal.confirm('确认删除' + file.name + '?');
            modal.$on('ok', () => resolve(true));
        };
        return new Promise(removeConfirm);
    }
});

选择文件后不上传

<jr-upload file-list={list} autoUpload={false} formData={formData}></jr-upload>
<jr-button title="上传" on-click={this.upload()}></jr-button>
var component = new JRUI.Component({
    template: template,
    data: {
        list: [{
          name: 'Game.jpg',
          url: 'http://haitao.nos.netease.com/906f417c7c964c0798adf9d0bf1b5c8c.jpg'
        }, {
          name: 'Kaola.jpg',
          url: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
          name: 'Music.jpg',
          url: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }],
        formData: new FormData()
    },
    upload: function(){
      var ajax = new XMLHttpRequest();
      ajax.open('json', '/upload');
      ajax.send(this.data.formData);  
    }
});

上传时携带其他参数

<jr-upload action='https://nos.kaolafed.com/upload'  data={{a:1,b:2}}></jr-upload>

API

JRUpload

Kind: global class
Extend: Component

new JRUpload()

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.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默认值，否则无法实现三层的双向数据绑定

“success 文件上传成功回调函数” (sender, file, fileList, status, progress)

Kind: event emitted by JRUpload

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

“progress 文件上传进度回调函数” (sender, file, fileList, status, progress)

Kind: event emitted by JRUpload

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

“error 文件上传失败回调函数” (sender, file, fileList, status, progress)

Kind: event emitted by JRUpload

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

“remove 上传文件删除回调函数” (sender, file, fileList, status, progress)

Kind: event emitted by JRUpload

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