Upload large file fragments using Ajax

// Sometimes the server cannot return the data type we want, but the client does not know that the server cannot return the data type, so even if xhr.responseType is set to the desired data type, it does not get the data type. The problem occurs when xhr.responseType resolves a value of type other than xhr.responseType using a value set by xhr.responseType

Const uploadFile =(file,size) => {var chunkSize = 1024 * 1024 * size; Var totalSize = file.size; Math.ceil(totalSize/chunkSize); // offset = 0; var reader = new FileReader(); reader.onload = function (e) { var xhr = new XMLHttpRequest(); xhr.open("POST", url); xhr.overrideMimeType("application/octet-stream"); xhr.onreadstatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { ++offset; If (offset === chunkQuantity) {alerrt(" upload complete "); } else if (offset === chunckQuantity - 1) { blob = file.slice(offset * chunkSize, totalSize); / / to read the file again trigger the onload event reader. ReadAsBinaryString (blob); } else { blob = file.slice(offset * chunkSize, (offset + 1) * chunckSize); / / to read the file again trigger the onload event reader. ReadAsBinaryString (blob); }} else {alert(" upload error "); }} // Avoid sendAsBinary does not exist error if (! xhr.prototype.sendAsBinary) { xhr.prototype.sendAsBinary = function (datastr) { function byteValue(x) { return x.charCodeAt(0) & 0xff; } var ords = Array.prototype.map.call(datastr, byteValue); var ui8a = new Uint8Array(ords); this.send(ui8a.buffer); } } } var blob = file.slice(0, chunkSize); reader.readAsBinaryString(blob); }Copy the code