前端文件
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<h1>文件上传1-相对慢，需要等待本地选择的文件全部上传完成后，服务器再保存</h1>
<form id="uploadFormBatch" enctype="multipart/form-data">
<input type="file" id="fileInputBatch" name="file" multiple>
<br><br>
<input type="button" id="btnBatch" value="批量提交整体上传" onclick="clearLog(); uploadFilesBatch()">
</form>
<h1>文件上传2-相对快-推荐使用，本地上传一个，服务器保存一个，前端循环</h1>
<form id="uploadFormOne" enctype="multipart/form-data">
<input type="file" id="fileInputOne" name="file" multiple>
<br><br>
<input type="button" id="btnOne" value="批量提交循环上传" onclick="clearLog(); uploadFilesOne()">
</form>
<div id="log"></div>
<script>
const url = 'http://localhost:8421'
function clearLog() {
const logDiv = document.getElementById('log');
logDiv.innerHTML = ""; // 清空日志内容
}
// 获取当前时间
function getDate() {
var now = new Date();
console.log("当前时间是：" + now);
return now;
}
// 获取两个时间的差值
function diffDate(startTime, endTime) {
// 获取两个时间的时间戳
var startTimeStamp = startTime.getTime();
var endTimeStamp = endTime.getTime();
// 计算时间差(毫秒)
var differenceInMilliseconds = endTimeStamp - startTimeStamp;
// 将毫秒转换为秒
var differenceInSeconds = differenceInMilliseconds / 1000;
console.log("两个时间的差是：" + differenceInSeconds + "秒");
return differenceInSeconds;
}
// 时间格式化 yyyy-MM-dd HH:mm:ss
function formatDate(date) {
const pad = (num) => (num < 10 ? '0' + num : num);
var year = date.getFullYear();
var month = pad(date.getMonth() + 1);
var day = pad(date.getDate());
var hour = pad(date.getHours());
var minute = pad(date.getMinutes());
var second = pad(date.getSeconds());
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
function uploadFilesBatch() {
const files = document.getElementById('fileInputBatch').files;
const butBatch = document.getElementById('btnBatch');
butBatch.disabled = true;// 禁用按钮
const startDate = getDate();
appendLog('程序启动-准备开始上传：' + formatDate(startDate));
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
fetch(url + '/upload_batch', {
method: 'POST',
body: formData
}).then(response => {
return response.text();
}).then(data => {
if (data === '文件上传成功！') {
// console.log(`文件 ${files.length} 上传成功`);
butBatch.disabled = false; //解除禁用
const endDate = getDate();
appendLog(`文件 ${files.length} 上传成功：` + formatDate(endDate));
appendLog(`总共耗时：` + diffDate(startDate, endDate) + `秒`);
} else {
console.error(`文件 ${files.length} 上传失败`);
appendLog(`文件 ${files.length} 上传失败`);
}
}).catch(error => {
console.error(`文件 ${files.length} 上传失败: ${error}`);
appendLog(`文件 ${files.length} 上传失败: ${error}`);
});
}
function uploadFilesOne() {
const files = document.getElementById('fileInputOne').files;
const btnOne = document.getElementById('btnOne');
btnOne.disabled = true; // 禁用按钮
let index = 0;
const startDate = getDate();
appendLog('程序启动-准备开始上传：' + formatDate(startDate));
function uploadFile(index) {
const startDateOne = getDate();
if (index >= files.length) {
const endDate = getDate();
appendLog("所有文件处理完成：" + formatDate(endDate));
appendLog(`总共耗时：` + diffDate(startDate, endDate) + `秒`);
btnOne.disabled = false;// 全部上传完成，解除禁用
return;
}
const file = files[index];
const formData = new FormData();
formData.append('file', file);
appendLog(`文件 ${file.name} 正在上传··· ···`)
fetch(url + '/upload_one', {
method: 'POST',
body: formData
}).then(response => {
return response.text();
}).then(data => {
if (data === '文件上传成功！') {
const endDateOne = getDate();
appendLog(`文件 ${file.name} 上传成功，耗时：` + diffDate(startDateOne, endDateOne) + `秒`);
uploadFile(index + 1); // 递归调用上传下一个文件
} else {
appendLog(`文件 ${file.name} 上传失败:${data}`);
uploadFile(index); // 文件上传失败则继续上传
}
}).catch(error => {
console.error(`文件 ${file.name} 上传失败: ${error}`);
appendLog(`文件 ${file.name} 上传失败: ${error}`);
});
}
uploadFile(index);
}
function appendLog(message) {
const logDiv = document.getElementById('log');
// logDiv.innerHTML += message + "<br>";
logDiv.innerHTML = `<p>${message}</p>` + logDiv.innerHTML;
}
</script>
</body>
</html>
后端文件使用python
# -*- ecoding: utf-8 -*-
# @ModuleName: test002
# 当你要使用这份文件时，
# 代表你已经完全理解文件内容的含义，
# 并愿意为使用此文件产生的一切后果，付全部责任
# @Funcation:
# @Author: darling
# @Time: 2024-06-17 14:21
from flask_cors import CORS
from flask import Flask, request
import os
from loguru import logger
app = Flask(__name__)
CORS(app)
@app.route('/upload_one', methods=['POST'])
def upload_one():
'''
前端上传，批量选择后，前端循环上传，后端单个接收
:return:
'''
file = request.files['file'] # 获取上传的文件
if file:
logger.info('获取到文件{}', file.filename)
file.save(os.path.join('files', file.filename)) # 保存文件到当前目录
logger.info('保存结束{}', file.filename)
return '文件上传成功！'
else:
return '文件上传失败！'
@app.route('/upload_batch', methods=['POST'])
def upload_batch():
'''
前端上传，批量选择后一次性上传,后端循环保存
:return:
'''
files = request.files.getlist('files') # 获取上传的文件列表
if files:
for file in files:
logger.info('获取到文件{}', file.filename)
file.save(os.path.join('files', file.filename)) # 保存文件到当前目录
logger.info('保存结束{}', file.filename)
return '文件上传成功！'
else:
return '文件上传失败！'
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8421)
