### 3.1 Python后端实现分块上传多个文件的解决方案 在Python中，可以使用`Flask`或`Django`框架来处理前端调用API分块上传多个文件的需求。以下是一个基于`Flask`的示例，展示如何实现分块上传多个文件的功能[^4]。 ```python from flask import Flask, request, jsonify import os app = Flask(__name__) UPLOAD_FOLDER = './uploads' if not os.path.exists(UPLOAD_FOLDER): os.makedirs(UPLOAD_FOLDER) @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return jsonify({"error": "No file part"}), 400 files = request.files.getlist('file') chunk_index = request.form.get('chunkIndex', type=int) total_chunks = request.form.get('totalChunks', type=int) for file in files: if file.filename == '': return jsonify({"error": "No selected file"}), 400 # 创建临时文件夹存储每个分块 temp_folder = os.path.join(UPLOAD_FOLDER, file.filename) if not os.path.exists(temp_folder): os.makedirs(temp_folder) # 存储当前分块 with open(os.path.join(temp_folder, f'chunk_{chunk_index}'), 'wb') as f: f.write(file.read()) # 如果是最后一个分块，则合并所有分块 if chunk_index == total_chunks - 1: with open(os.path.join(UPLOAD_FOLDER, file.filename), 'wb') as outfile: for i in range(total_chunks): chunk_path = os.path.join(temp_folder, f'chunk_{i}') with open(chunk_path, 'rb') as infile: outfile.write(infile.read()) # 删除临时文件夹 os.rmdir(temp_folder) return jsonify({"message": "File uploaded successfully"}), 200 ``` 上述代码片段展示了如何通过`Flask`接收前端发送的分块文件，并将其保存到服务器上。当接收到所有分块后，将这些分块合并为完整的文件[^5]。 ### 3.2 前端实现分块上传多个文件的逻辑 前端可以通过`JavaScript`结合`fetch` API实现分块上传多个文件的功能。以下是一个简单的前端示例： ```javascript function uploadFiles(files) { const CHUNK_SIZE = 1 * 1024 * 1024; // 每个分块大小为1MB const url = '/upload'; files.forEach(async (file) => { let start = 0; let end = Math.min(CHUNK_SIZE, file.size); let totalChunks = Math.ceil(file.size / CHUNK_SIZE); for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk, file.name); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', totalChunks); await fetch(url, { method: 'POST', body: formData, }); start = end; end = Math.min(start + CHUNK_SIZE, file.size); } }); } ``` 此代码片段展示了如何将文件分割为多个分块，并通过`fetch` API逐个上传至服务器[^6]。 ### 3.3 结合jQuery File Upload组件 如果希望使用更成熟的前端组件，可以考虑使用`jQuery File Upload`插件。该插件提供了丰富的功能，包括文件选择、上传进度追踪、取消上传等。通过包含`jquery.fileupload.js`及其扩展模块，可以轻松实现分块上传多个文件的功能[^3]。 ```html <script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ url: '/upload', dataType: 'json', done: function (e, data) { console.log('Upload completed:', data); }, progressall: function (e, data) { let progress = parseInt(data.loaded / data.total * 100, 10); console.log('Upload progress:', progress + '%'); } }); }); </script> ``` 此代码片段展示了如何通过`jQuery File Upload`插件实现文件上传，并实时追踪上传进度[^2]。