Layui Upload 多文件上传访问多次接口问题解决

Layui 多文件上传访问多次接口

点我访问 LayUI框架官网

话不多数直接看源码

文件地址: layui/modules/upload.js

// 通过each循环文件列表
layui.each(items, function(index, file){
  var formData = new FormData();
  formData.append(options.field, file);
  
  //追加额外的参数
  layui.each(options.data, function(key, value){
    value = typeof value === 'function' ? value() : value;
    formData.append(key, value);
  });
  //提交文件
  var opts = {
    url: options.url
    ,type: 'post' //统一采用 post 上传
    ,data: formData
    ,contentType: false 
    ,processData: false
    ,dataType: 'json'
    ,headers: options.headers || {}
    //成功回调
    ,success: function(res){
      successful++;
      done(index, res);
      allDone();
    }
    //异常回调
    ,error: function(){
      aborted++;
      that.msg('请求上传接口出现异常');
      error(index);
      allDone();
    }
  };

  // 通过 Ajax 发送请求
  $.ajax(opts);
  
});

---

问题发生原因

看到Ajax发送的请求是异步请求,如果有20个文件要上传,那他会一次性发送20个接口请求到后台.

如果后台设置了并发限制，达到限制数量后会拦截这些请求，此时Layui就会执行error方法，报错‘请求上传接口出现异常’，整个上传将会失败.

---

解决办法 （两种）

1. 将Ajax请求改成同步请求，那么20次请求会一次一次发送，上个请求执行完成，下个请求才会发起。可以解决并发问题,但是会有等待时间变长的问题

var opts = {
  url: options.url
  ,type: 'post' //统一采用 post 上传
  ,data: formData
  ,contentType: false 
  ,ansyn: false, //开启同步请求
  ,processData: false
  ,dataType: 'json'
  ,headers: options.headers || {}
  //成功回调
  ,success: function(res){
    successful++;
    done(index, res);
    allDone();
  }
  //异常回调
  ,error: function(){
    aborted++;
    that.msg('请求上传接口出现异常');
    error(index);
    allDone();
  }
};

2. 将file文件存到一个formData里，只访问一次接口即可.后台接受文件参数要改成数组参数。 但是这样多文件上传成功后Layui框架封装的回调方法中参数会获取不到

// 通过each循环文件列表
layui.each(items, function(index, file){
  var formData = new FormData();
  // 先将所有文件放入formData
  formData.append(options.field, file);
});
//追加额外的参数
layui.each(options.data, function(key, value){
  value = typeof value === 'function' ? value() : value;
  formData.append(key, value);
});
//提交文件
var opts = {
  url: options.url
  ,type: 'post' //统一采用 post 上传
  ,data: formData
  ,contentType: false 
  ,processData: false
  ,dataType: 'json'
  ,headers: options.headers || {}
  //成功回调
  ,success: function(res){
    successful++;
    done(index, res);
    allDone();
  }
  //异常回调
  ,error: function(){
    aborted++;
    that.msg('请求上传接口出现异常');
    error(index);
    allDone();
  }
};

  // 通过 Ajax 发送请求
  $.ajax(opts);

---

总结

两种方法各有利弊，具体看实际情况修改