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);

---

總結

兩種方法各有利弊，具體看實際情況修改