服务端功能
上传分片保存
@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=splitfile[0]
#ext=splitfile[1]
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").files[0];
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").files[0];
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").files[0];
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 (!chunkRetries[chunkIndex]) {
chunkRetries[chunkIndex] = 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) => {
chunkRetries[chunkIndex]++;
console.error(`上传分片 ${chunkIndex} 失败: ${error.message}, 重试次数: ${chunkRetries[chunkIndex]}/${MAX_RETRIES}`);
if (chunkRetries[chunkIndex] < 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来处理请求超时的情况
});
}
