文件分片上传 python

服务端功能

上传分片保存

@app.route('/upload_filesliceprocess', methods='POST')

def upload_filesliceprocess():

file = request.files'file'

name_index = request.form'name_index'

complete = request.form'complete'

process = request.form'process'

clienthash = request.form'clienthash'

source_name = request.form'filename'

filename = ''.join(source_name.split('.')0:-1)

file_path = fr'{SLICE_DATA}/{filename}'

p_file_path = pd.Path(file_path)

if not pd.Path.exists(p_file_path):

os.makedirs(p_file_path)

fileindex=fr'{file_path}/{name_index}'

filename=fr'{file_path}/{name_index}'

if(os.path.exists(fileindex)==False):

file.save(filename)

import utils

hashserver=utils.calculate_md5(filename)

if(clienthash==hashserver):

return 'ok'

else:

return 'error'

print(f'process:{round(float(process)*100, 2)}%')

合并分片功能

@app.route('/merge_file', methods='POST')

def merge_file():

print('-------------------------------')

filename = request.form'filename'

print(filename)

#splitfile=os.path.splitext(filename)

#filename=splitfile0

#ext=splitfile1

filename, ext = os.path.splitext(filename)

ext=ext.replace('.','')

file_path= fr'{SLICE_DATA}/{filename}'

combination_fun(file_path,filename,ext)

return 'ok'

合并文件函数

def combination_fun(folder_path, source_name,ext):

com_path = pd.Path(COMBINATION_DATA)

if not pd.Path.exists(com_path):

os.makedirs(com_path)

ready_folder = os.listdir(folder_path)

ready_sort_folder = sorted(ready_folder, key=lambda x: int(x.split('_')-1))

with open(f'{COMBINATION_DATA}/{source_name}.{ext}', 'wb') as write_f:

for item in ready_sort_folder:

slice_item = os.path.join(folder_path, item)

print(slice_item)

with open(slice_item, "rb") as read_f:

content = read_f.read()

write_f.write(content)

#删除缓存文件

for item in ready_sort_folder:

slice_item = os.path.join(folder_path, item)

os.remove(slice_item)

前端

引用库 jquery Md5

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

上传简单界面

<input type="file" name="file" id="file">

<button id="upload" onClick="uploadfile()">upload</button>

<button id="mergedata" onClick="uploadcomplete()">mergedata</button>

<div class="rate_div" >

上传进度:<span id="rate_nums">0</span>

<progress id="downloadProgress" value="0" max="100"></progress>

</div>

上传脚本

<script type="text/javascript">

var totalPieces=0;

var nowUploadNums = 0;

const MAX_RETRIES = 5; // 最大重试次数

const CHUNK_SIZE = 100*1024 * 1024; // 1MB 分片大小

let arr = \[\];

let retries=\[\];

//发送请求

function displayProgress(percent) {

document.getElementById('downloadProgress').value = percent;

}

function mergedata()

{

var blob = document.getElementById("file").files0;

var filesize = blob.size;

var filename = blob.name;

}

function setRate(num) {

var rateNums = document.getElementById('rate_nums');

rateNums.innerHTML = num;

}

function uploadcomplete()

{

nowUploadNums ++;

if(nowUploadNums >=totalPieces)

{

console.log('true')

var blob = document.getElementById("file").files0;

var filename = blob.name;

var formData = new FormData();

formData.append("filename", filename);

$.ajax({

url: '/merge_file',

type: 'POST',

cache: false,

data: formData,

processData: false,

contentType: false,

}).done(function(res){

alert('合并成功');

}).fail(function(res) {

alert('合并失败');

});

}

else{

console.log('false')

}

}

function uploadfile() {

var blob = document.getElementById("file").files0;

var start = 0;

var end;

var index = 1;

var filesize = blob.size;

var filename = blob.name;

var complete = false;

nowUploadNums =0;

const totalChunks= Math.ceil(filesize / CHUNK_SIZE );

let uploadedChunks = 0;

let chunkRetries = {};

function updateProgress() {

document.getElementById('downloadProgress').value =Math.round((uploadedChunks / totalChunks) * 100);

}

function uploadNextChunk() {

if (uploadedChunks >= totalChunks) {

console.log('文件上传完成!');

updateProgress(); // 确保进度条显示100%

// 通知服务器所有分片都已上传,可以进行合并

return;

}

const start = uploadedChunks * CHUNK_SIZE;

const end = Math.min(start + CHUNK_SIZE, blob.size);

const chunk = blob.slice(start, end);

const chunkIndex = uploadedChunks;

if (!chunkRetrieschunkIndex) {

chunkRetrieschunkIndex = 0;

}

const wordArray = CryptoJS.lib.WordArray.create(chunk );

const clienthash= CryptoJS.MD5(wordArray).toString()

uploadChunk(chunk, chunkIndex,filename ,clienthash,complete,uploadedChunks , totalChunks).then(() => {

uploadedChunks++;

updateProgress(); // 更新进度条

uploadNextChunk(); // 上传下一个分片

}).catch((error) => {

chunkRetrieschunkIndex++;

console.error(`上传分片 {chunkIndex} 失败: {error.message}, 重试次数: {chunkRetries\[chunkIndex\]}/{MAX_RETRIES}`);

if (chunkRetrieschunkIndex < MAX_RETRIES) {

// 等待一段时间后重试上传当前分片

setTimeout(uploadNextChunk, 1000); // 延迟1秒重试

} else {

console.error(`分片 ${chunkIndex} 上传失败,已达到最大重试次数`);

// 处理上传失败的情况,比如停止上传或通知用户

}

});

}

uploadNextChunk();

}

function uploadChunk(chunk, sliceIndex,filename,clienthash,complete,index,totalPieces) {

var formData = new FormData();

formData.append("file", chunk);

formData.append("name_index", sliceIndex);

formData.append("filename", filename);

formData.append("clienthash", clienthash);

formData.append("complete",complete);

formData.append("process", index / totalPieces);

return $.ajax({

url: '/upload_filesliceprocess', // 替换为你的上传URL

type: 'POST',

data: formData,

processData: false,

contentType: false,

// 可以设置timeout来处理请求超时的情况

});

}

相关推荐
曲幽2 小时前
FastAPI 身份验证总踩坑?这份 FastAPI Users “避坑指南”请收好
python·fastapi·web·jwt·oauth2·user·authentication
xieliyu.2 小时前
Java算法精讲:双指针(二)
java·开发语言·算法
装不满的克莱因瓶3 小时前
掌握 RNN 与 LSTM 模型结构
人工智能·python·rnn·深度学习·神经网络·ai·lstm
云水一下3 小时前
TypeScript 从零基础到精通(五):高级类型与泛型
前端·javascript·typescript
何以解忧,唯有..3 小时前
Python包管理工具pip:从入门到精通
开发语言·python·pip
counterxing3 小时前
vibe coding 之后,我更不想打字了
前端·agent·ai编程
雪的季节3 小时前
RabbitMQ详解
开发语言
金銀銅鐵3 小时前
用 Tkinter 实现简单的猜数字游戏
后端·python
copyer_xyf3 小时前
Python 模块与包的导入导出
前端·后端·python
研☆香3 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6