简易跨平台上传文件，前后端demo

前端文件

<!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)

posted @ 2024-06-28 18:08 darling331 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

darling

简易跨平台上传文件，前后端demo

前端文件

后端文件使用python

公告