環境
Chrome 89.0.4389.90
FireFox 86.0.1
OS: Windows 10 20H2
服務端: PHP 7.4.9
內建環境: Wampserver x64
構造 FormData
// 傳入一個參數 file, 類型為 File.
var chunkSize = 8388608;
var formData = new FormData;
formData.set('chunk', file.slice(0, chunkSize));
請求
new Promise((resolve, reject) => {
$.ajax({
url: chunk_url,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function success() {
// 更新進度條的代碼...
resolve();
},
error: function error(jqXHR, textStatus) {
conosle.error(textStatus);
reject(textStatus);
}
});
});
問題
搞了兩個晚上了, 試了各種奇奇怪怪的方法都沒有用.
當請求之後開發者工具裡面請求中沒有找到 POST 參數.
然後用 Firefox 的開發者工具檢視的時候會出現一行請求已被截斷.
接下來我嘗試去改 php 的配置, 具體是這三個參數:
post_max_size = 256M
max_input_vars = 2500
upload_max_filesize = 128M
然後發現依然沒有用, POST 參數依然不會去到後端, 也不會顯示在請求裡面.
最後我直接把整個 file 給丢到 FormData 裡面發現請求可以正常發送, 工具裡也能看到所有 POST 參數并且後端也能拿到…
邪門了…
猜測
ajax 處理 FormData 的時候不能正确判斷檔案的結束位置.
Blob.slice
處理的問題.
撞鬼了.
是以這到底是我系統的問題還是怎樣, 腦殼大…
麻煩各位大佬看看了…
你的問題描述細節豐富，但是你的代碼段沒頭沒尾的，報錯資訊也沒有。
這代碼我目測沒問題，動手測試了也沒問題，可以發送請求，後端也能接收到資料，PHP $_FILES 數組也有 chunk 鍵。
因為不能複現你說的問題。我隻能說，如果隻是為了上傳檔案，可以考慮第三方開源庫，比如 https://github.com/pqina/filepond
如果想繼續排查，可以在 firefox 控制台右邊齒輪圖示把“持續記錄”打開，確定就算頁面重新整理了報錯資訊也不被刷掉，然後再重新整理頁面測試看有沒有報錯資訊，逐點檢查每個環節的資料正不正常。
