Axios：上傳多個文件上傳的進度

正在關注https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html我已經用進度條設置了文件上傳。Axios：上傳多個文件上傳的進度

不過，我有<input type="file" multiple>，因此上傳是這樣一個循環中：

for (var i=0; i<files.length; i++) 
{ 
    var config = { 
     onUploadProgress: function(progressEvent) { 
      var what = Math.round((progressEvent.loaded * 100)/progressEvent.total); 
     } 
    }; 
    axios.post(url, data, config) 
     .then(function (response) { 
    });        
}

的問題是：如何分配上傳進度（見var what）到相應文件？

一切我已經試過沒有工作：

回調函數onUploadProgress顯然不會採取任何第二個參數：https://github.com/mzabriskie/axios#request-config

注入progressEvent對象不包含任何關於上傳文件的信息。例如：

progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true, loaded: 181914, total: 181914, currentTarget: XMLHttpRequestUpload, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false }

的循環變量i在原則上是可訪問的 - 然而，它在最後位置總是（因爲當onUploadProgress被稱爲上載過程中循環完成）

我不能'T想出一個辦法來訪問Axios公司' 從內部onUploadProgress

this指data：

XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null }

還有其他想法嗎？

來源

2017-07-03 Thomas Landauer

我在這裏錯過了什麼嗎？您位於for循環內並一次上傳一個文件。這意味着在每個progressEvent中，您已經指向相應的文件。你可以添加一個監聽器到progressEvent並打印出它的「總計」值嗎？我想你已經在看相應的文件了。作爲一個側面說明，將配置從for循環中取出，您不需要爲每個文件重新定義它。 –

是的，謝謝，我已經認爲答案可能是沒有答案;-)我只能在幾天內嘗試這個 - 我會報告然後... –

我也想知道如何做到這一點。使用jQuery，我一直使用「xhrFields」參數，但我不確定Axios是否有類似的東西。 – dvyio

這是一個變量範圍界定問題。在JavaScript var中聲明瞭一個變量函數範圍。有很多潛在的解決方案，具體取決於您的目標瀏覽器支持的ES版本。我將使用相同的函數來證明：

setTimeout(function(){ console.log(i); }, i * 100);

使用var這會打印出「5」的5倍。我們希望它能打印出0 1 2 3 4。

如果你有Array#forEach，您可以使用自封閉創建一個新的功能範圍

[0, 1, 2, 3, 4].forEach(function(i) { 
    setTimeout(function(){ console.log(i); }, i * 100); 
});

如果你有機會獲得let，let和const使用塊作用域代替（即變量是範圍到最近的一組{ ... }）。

for (let i = 0; i < 5; i++) { 
    setTimeout(function(){ console.log(i); }), i * 100); 
}

如果您無法訪問其中任何一個，則可以使用IIFE。這真的很醜，但它完成了工作。

for (var i = 0; i < 5; i++){ 
    (function() { 
     var newI = i; 
     setTimeout(function(){ console.log(newI); }, i * 100); 
    })(); 
}

來源

2017-08-02 15:50:55

您可以創建一個函數，以某個Id作爲參數返回另一個裝飾函數。

例子：

const myUploadProgress = (myFileId) => (progress) => { 
    let percentage = Math.floor((progress.loaded * 100)/progress.total) 
    console.log(myFileId) 
    console.log(percentage) 
} 

for (var i=0; i<files.length; i++) { 
    var config = { 
    onUploadProgress: myUploadProgress(files[i].id) 
    }; 

    axios.post(url, data, config).then(function (response) {});        
}

如果你沒有ES6你可以這樣做：

function myUploadProgress(myFileId) { 
    return function(progress) { 
    ... 
    } 
}

（我用我的項目類似的代碼，它就像一個魅力）

來源

2017-09-15 04:18:32

Axios：上傳多個文件上傳的進度

回答

相關問題