原理
再開可能なダウンロードについては、誰もがそれにさらされているはずです。たとえば、ダウンロードが一時停止されている場合、次回 [開始] をクリックするとダウンロードを続行できます。再開可能なダウンロードがない場合は、少し停止してください。すべてを聞くと、次回ダウンロードが再び開始されます。
原則として (アップロードを例にとります)、ファイルを複数の部分 (スライス) にアップロードし、どのスライスにアップロードしたかを記録し、次回は最後に一時停止したスライスのアップロードを続けます。すべてのファイル。
フロントエンドスライスコード
ファイルはサイズまたはコピー数でスライスできます。次のコードはサイズでスライスするためのものです。md5値はファイルの一意の識別子です。
ファイルの md5 値に基づいて数秒でアップロードすることもできます(アップロードするたびに、データベースに md5 値を確認します。この値が存在する場合、それは同じファイルです。データベース ファイル アドレスをコピーするだけでよく、繰り返しアップロードする必要はありません)
import axios from "axios";
import SparkMD5 from 'spark-md5'
const upload = {
uploadFile(file, chunkSize, url) {
const fileReader = new FileReader();
const spark = new SparkMD5.ArrayBuffer()
fileReader.readAsArrayBuffer(file)
fileReader.onload = async function (e) {
spark.append(e.target.result)
const md5 = spark.end();
let uploadedSize = 0;
const fileSize = file.size;
// 向上取整
const totalChunks = Math.ceil(fileSize / chunkSize);
while (uploadedSize < fileSize) {
// 因为最后一次可能会超出文件总大小，所以取文件总大小
const endSlice = Math.min(uploadedSize + chunkSize, fileSize);
const blob = file.slice(uploadedSize, endSlice);
const formData = new FormData();
formData.append('file', blob);
formData.append('start', uploadedSize);
formData.append('end', endSlice);
formData.append('totalChunks', totalChunks);
formData.append('md5', md5);
const data = {
};
formData.forEach((value, key) => data[key] = value);
console.log(data)
const response = await axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if (response.data.code === 200) {
} else {
throw new Error("");
}
}
}
}
}
export default upload;
バックエンド受信コード
。。。後でメイクしてね