正文

教你轻松实现JS文件断点续传，告别上传中断烦恼

/0 浏览量
0416

在互联网时代，文件上传是常见的需求。然而，由于网络不稳定或操作失误，上传过程中可能会出现中断。为了解决这一问题，我们可以通过JavaScript实现文件断点续传功能。本文将详细介绍如何轻松实现这一功能，让你告别上传中断的烦恼。

一、断点续传原理

断点续传的核心思想是将大文件分割成多个小块，然后分别上传。如果上传过程中出现中断，可以从上次中断的地方继续上传，直到所有小块都上传完成。

二、实现步骤

以下是实现文件断点续传的步骤：

1. 准备工作

首先，我们需要准备一个HTML页面，用于上传文件。页面中包含一个文件选择框和一个上传按钮。

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传</button>

2. JavaScript代码

接下来，编写JavaScript代码实现断点续传功能。

// 获取文件选择框和上传按钮
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

// 文件上传函数
function uploadFile() {
  const file = fileInput.files[0];
  const chunkSize = 1024 * 1024; // 每个块的大小，这里以1MB为例
  const totalChunks = Math.ceil(file.size / chunkSize); // 总块数
  let currentChunk = 0; // 当前块索引

  // 初始化上传
  function initUpload() {
    const formData = new FormData();
    formData.append('file', file.slice(currentChunk * chunkSize, (currentChunk + 1) * chunkSize));
    formData.append('chunkIndex', currentChunk);

    // 发送请求
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        currentChunk++;
        if (currentChunk < totalChunks) {
          initUpload();
        } else {
          alert('上传成功！');
        }
      } else {
        alert('上传失败，请重试！');
      }
    })
    .catch(error => {
      console.error('上传过程中发生错误：', error);
    });
  }

  initUpload();
}

3. 服务器端处理

在上面的代码中，我们使用了fetch函数发送POST请求。服务器端需要处理这个请求，并将上传的文件块保存到服务器上。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
  file = request.files['file']
  chunk_index = int(request.form['chunkIndex'])
  file.save(f'./chunks/{chunk_index}.part')

  return jsonify({'success': True})

if __name__ == '__main__':
  app.run()

4. 完成上传

当所有文件块都上传完成后，我们可以将它们合并成一个完整的文件。

import os

def merge_chunks():
  file_path = './output'
  os.makedirs(os.path.dirname(file_path), exist_ok=True)
  with open(file_path, 'wb') as f:
    for i in range(100):  # 假设总块数为100
      with open(f'./chunks/{i}.part', 'rb') as chunk:
        f.write(chunk.read())

if __name__ == '__main__':
  merge_chunks()

三、总结

通过以上步骤，我们成功实现了文件断点续传功能。在实际应用中，可以根据具体需求调整代码，例如调整块大小、处理上传进度等。希望本文能帮助你解决文件上传中断的烦恼。

-- 展开阅读全文 --