十分钟带你学会Layui 文件上传

如何学会玩转LayUi文件上传

1. 首先我们先看一个LayUi官方文档给我们提供的东西：

layui.use('upload', function(){
     
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
     
    elem: '#test1'
    ,url: '/upload/'
    ,before: function(obj){
     
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
     
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
     
      //如果上传失败
      if(res.code > 0){
     
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
     
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('上传失败 重试');
      demoText.find('.demo-reload').on('click', function(){
     
        uploadInst.upload();
      });
    }
  });

文件上传参数：

2. 文档上有的咱就不细说了，我主要分享一下我碰到的容易踩坑的地方

   1.LayUi是支持多文件上传的，所以当你需要多文件上传的时候，仅仅只是加上
   multiple:true是不行的还得加上这俩个
   

  processData: false, // 告诉jQuery不要去处理发送的数据
  contentType: false,// 告诉jQuery不要去设置Content-Type请求头

	2.如果你是想跟form表单一起提交，把上传的文件用一个全局变量接收(多文件则可以使用以数组的
	形式)再创建一个表单，再将其添加到form中，具体代码书写如下：

  choose: function (obj) {
     
   //获取上传图片元素
        var files = obj.pushFile();
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
     
            fileHtml.push(index);
            //如不需要校验图片是否为null,则可以去掉
            fileImg = file;
            pic = "";
            delete files[index];
        });           
        

** from表单在保存的接口的请求function里面创建**	

  //创建一个表单
    var formData = new FormData();
    formData.append("file",fileImg); //将上传的文件存到form表单中
    var json = getFormData("save-form-spec");
    for (var key in json) {
     
        formData.append(key, json[key]);
    }

3. LayUi富文本编辑器里上传文件，简单明了直接上代码

 //富文本编辑器图片上传配置
    layedit.set({
     
        uploadImage: {
     
            url: '/goods/batchFileUpload' //接口url
            , type: 'POST' //默认post
            , size: 5120 //图片大小
        }
    });
    //建立富文本编辑器
    Textarea = layedit.build('description', {
     
        height: 500,//设置编辑器高度
        tool: [
            'strong' //加粗
            , 'italic' //斜体
            , 'underline' //下划线
            , 'del' //删除线
            , '|' //分割线
            , 'left' //左对齐
            , 'center' //居中对齐
            , 'right' //右对齐
            , 'link' //超链接
            , 'unlink' //清除链接
            , 'face' //表情
            , 'image' //插入图片
            , 'help' //帮助
        ]
    });