layuiupload.render使用详解

发布时间：2023-05-20

一、什么是layuiupload.render

layuiupload.render是一种基于layui框架的函数，用来渲染上传组件，并且提供了一些配置参数和回调函数，以便用户对上传组件进行自定义设置。可以说，layuiupload.render是layui框架中比较核心和重要的一个函数。

二、layuiupload.render的基本用法

layuiupload.render函数的基本用法如下：

layui.upload.render({
    elem: '#upload', //绑定元素
    url: '/upload/', //上传接口
    done: function(res){
        //上传完毕回调
    },
    error: function(){
        //请求异常回调
    }
});

其中，elem参数表示绑定的元素，如按钮或者容器。url参数表示上传接口，done参数表示上传成功后的回调函数，error参数表示出现异常时的回调函数。

三、layuiupload.render的高级用法

除了基本用法之外，layuiupload.render还提供了一些高级用法，如下：

1、设置上传文件的类型和大小限制

layui.upload.render({
    elem: '#upload',
    url: '/upload/',
    accept: 'file',
    exts: 'doc|docx|pdf', //指定文件后缀名
    size: 1024, //单位KB
    done: function(res){
        //上传完毕回调
    }
});

其中，accept参数表示上传文件类型，如'file'表示任意文件类型，'images'表示图片类型；exts参数表示上传文件后缀名限制，如'doc|docx|pdf'表示只允许上传doc、docx和pdf文件；size参数表示上传文件大小限制，单位为KB。

2、自定义上传请求头

layui.upload.render({
    elem: '#upload',
    url: '/upload/',
    headers: {'Authorization': 'Bearer '+ token},
    done: function(res){
        //上传完毕回调
    }
});

其中，headers参数表示设置上传请求的自定义请求头，如上述例子中的Bearer和token。

3、上传进度条显示

layui.upload.render({
    elem: '#upload',
    url: '/upload/',
    progress: function(n,elem){
        var percent = n + '%';
        element.progress('demo', percent);
    },
    done: function(res){
        //上传完毕回调
    }
});

其中，progress参数表示上传进度条回调函数，在上传过程中会不断调用该函数，n参数表示上传的进度值，elem参数表示上传进度条的DOM元素。实现上传进度条显示需要借助layui框架中的element.progress函数。

4、自定义上传按钮的样式和文本

layui.upload.render({
    elem: '#upload',
    url: '/upload/',
    before: function(){
        layer.msg('正在上传中...', {icon: 16, shade: 0.01, time: 0});
    },
    done: function(res){
        //上传完毕回调
    }
});

其中，before参数表示上传前的回调函数，可以进行一些自定义操作，如在上传前提示正在上传中。需要借助layui框架中的layer.msg函数。

四、总结

综上所述，layuiupload.render是layui框架中比较核心和重要的一个函数，可以实现文件上传组件的渲染和自定义设置。在使用layuiupload.render函数时，可以根据自己的需求进行灵活的参数配置和回调函数设置，以满足不同的业务场景需求。

推荐文章