在使用 net::ERR_FILE_NOT_FOUND 成功上傳一些成功后，使用 Ionic4 和 Angular HttpClient 上傳分塊文件失敗

Question

我正在嘗試將一個大文件（500+Mb，但可能更大）上傳到我們的 php 服務器，使用用 Ionic4+Angular+Cordova 編寫的應用程序，在帶有 Android 10 的模擬器上。我設置了一個系統來上傳分塊的文件。 它使用此插件逐塊讀取用戶選擇的文件（每塊 5Mb）。 然后它繼續將它發送到我們的服務器，執行帶有內容類型 multipart/form-data 的 POST 請求。 文件轉到服務器，服務器保存它，說“OK”，然后應用程序繼續發送以下塊。 對於前 25/29 個塊，一切正常。 然后，POST 請求失敗

POST http://192.168.1.2/work/path/to/webservices/uploadChunks.php net::ERR_FILE_NOT_FOUND

我試過：

• 從文件中的另一個點而不是字節 0 開始 - 得到相同的錯誤
• 逐塊讀取文件，而不發出任何 POST 請求 - 可以循環整個 500Mb 文件
• 逐塊讀取文件並發出 POST 請求，但不隨它們一起發送塊 - 可以在文件末尾執行每個調用而不會出現任何錯誤
• 逐塊讀取文件並將它們發送到另一個網絡服務 - 得到相同的錯誤
• 逐塊讀取文件並對另一個 Web 服務執行 POST 請求，內容類型為 application/json 並將 formData 對象放入請求正文中（不確定這是一個有效的測試） - 可以執行每個調用而沒有任何錯誤, 通過文件末尾

檢查在不同塊上傳期間在 chrome 檢查器中拍攝的內存快照沒有顯示任何內存泄漏跡象。

該案例在相當舊的設備上進行了測試，其中相同的過程導致應用程序退出，而沒有發出任何錯誤信號（甚至在 logcat 中顯然也沒有）。

這是用於分塊和發送文件的代碼段：

const generatedName = 'some_name_for_file';

// Path obtained from fileChooser plugin
let path_to_file = 'content://com.android.externalstorage.documents/document/primary%3ADownload%2Ffilename.avi'

const min_chunk_size = (5 * 1024 * 1024);

// Converting path to file:// path
this.filePath.resolveNativePath(path_to_file).then((resolvedPath) => {

    return this.fileAPI.resolveLocalFilesystemUrl(resolvedPath);

}, (error) => {
    console.log('ERROR FILEPATH');
    console.log(error);
    return Promise.reject('Can not access file.<br>Code : F - ' + error);
}).then(
    (entry) => {

        path_to_file = entry.toURL();
        console.log(path_to_file);

        (entry as FileEntry).file((file) => {

            //Getting back to the zone
            this.ngZone.run(() => {

                // Re-computing chunk size to be sure we do not get more than 10k chunks (very remote case)
                let file_chunk_size = file.size / 10000;
                if (file_chunk_size < min_chunk_size) {
                    file_chunk_size = min_chunk_size;
                }

                //Total number of chunks
                const tot_chunk = Math.ceil(file.size / file_chunk_size);

                const reader = new FileReader();

                let retry_count = 0; //Counter to check on retries

                const readFile = (nr_part: number, part_start: number, length: number) => {

                    // Computing end of chunk
                    const part_end = Math.min(part_start + length, file.size);

                    // Slicing file to get desired chunk
                    const blob = file.slice(part_start, part_end);

                    reader.onload = (event: any) => {

                        if (event.target.readyState === FileReader.DONE) {

                            let formData = new FormData();

                            //Creating blob
                            let fileBlob = new Blob([reader.result], {
                                type: file.type
                            });

                            formData.append('file', fileBlob, generatedName || file.name);
                            formData.append('tot_chunk', tot_chunk.toString());
                            formData.append('nr_chunk', nr_part.toString());

                            // UPLOAD
                            const sub = this.http.post('http://192.168.1.2/path/to/webservice/uploadChunk.php', formData).subscribe({

                                next: (response: any) => {

                                    console.log('UPLOAD completed');
                                    console.log(response);

                                    retry_count = 0;

                                    if (response && response.status === 'OK') {

                                        //Emptying form and blob to be sure memory is clean
                                        formData = null;
                                        fileBlob = null;

                                        // Checking if this was the last chunk
                                        if (part_end >= file.size) {
                                            // END

                                            callback({
                                                status: 'OK'
                                            });
                                        } else {

                                            // Go to next chunk
                                            readFile(nr_part + 1, part_end, length);

                                        }

                                        //Clearing post call subscription
                                        sub.unsubscribe();

                                    } else {
                                        //There was an error server-side
                                        callback(response);
                                    }

                                },

                                error: (err) => {
                                    console.log('POST CALL ERROR');
                                    console.log(err);
                                    if (retry_count < 5) {
                                        setTimeout(() => {
                                            retry_count++;
                                            console.log('RETRY (' + (retry_count + 1) + ')');
                                            readFile(nr_part, part_start, length);
                                        }, 1000);
                                    } else {
                                        console.log('STOP RETRYING');
                                        callback({status:'ERROR'});
                                    }
                                }

                            });

                        }

                    };

                    //If for some reason the start point is after the end point, we exit with success...
                    if (part_start < part_end) {
                        reader.readAsArrayBuffer(blob);
                    } else {
                        callback({
                            status: 'OK'
                        });
                    }

                };

                //Start reading chunks
                readFile(1, 0, file_chunk_size);


            });
        }, (error) => {
            console.log('DEBUG - ERROR 3 ');
            console.log(error);
            callback({
                status: 'ERROR',
                code: error.code,
                message: 'Can not read file<br>(Code: 3-' + error.code + ')'
            });
        });
    }, (error) => {
        console.log('ERROR 3');
        console.log(error);
        return Promise.reject('Can not access file.<br>Code : 3 - ' + error);
    }
);

我不知道出了什么問題。 有人可以幫我調試這個，或者知道會發生什么嗎？

非常感謝。

Answer 1

我仍然不知道是什么導致了這個問題，但我使用 PUT 請求而不是 POST 請求解決了這個問題，發送原始塊，並將附加數據放在自定義標頭中（類似於“X-nr-chunk”或“X-tot” -塊”）。 上傳完成，沒有錯誤消息。

我還使用了cordova-advanced-http插件，但我認為它在這里沒有什么不同，因為它與其他方法（httpClient）一樣不適用於POST請求。

目前僅在 android 上測試過，未在 iOS 上測試過。 如果有問題，我會報告。 現在我認為這已經解決了，但是如果您知道可能導致此問題的原因，請分享您的想法。

謝謝大家。