大文件上传代码实战

最新推荐文章于 2024-08-22 11:23:19 发布
最新推荐文章于 2024-08-22 11:23:19 发布
阅读量413 收藏 10
点赞数 4
分类专栏： JavaScript-基础 文章标签： 状态模式 前端 typescript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42533732/article/details/135405013
版权

大文件上传代码实战

一、项目初始化

1、项目初始化

我们创建一个 big-file-upload 目录作为当前项目的根目录文件。

执行以下命令对当前项目进行初始化，生成 package.json 文件：

npm init -y

2、搭建项目结构

在项目根目录中创建 public 目录，作为前端静态资源目录。同时在 public 中创建 index.html 用于构建前端页面。

｜--- chunks						  # 保存上传的文件切片
｜--- public						  # 保存前端资源
 	   ｜--- files      			  # 存放上传成功的大文件
	   ｜--- js          		  # 存放前端 JS 文件
  	   ｜    ｜--- axios.min.js  	 # 发送请求
  	   ｜--- index.html   		  # 前端页面						   
｜--- server.js					  # 后端服务器代码

3、下载服务端依赖包

下载项目所需依赖包：

npm i express fs-extra multiparty

插件说明：

  • express：搭建服务器
  • fs-extra：文件处理
  • multiparty：文件上传

页面显示

image-20230914102554935

二、前后端初始代码

1、前端页面

前端 index.html 页面初始代码如下：

<div>
    <input type="file" id="chooseFile">
    <button id="uploadFile">上传</button> 
</div>
<div style="margin: 20px 0;">
    <progress value="0" id="progress"></progress>
    <span id="message"></span>
</div>
<div>
    <button id="stopUpload">暂停</button>
    <button id="keepUpload">续传</button>
</div>

<script>
    const chooseFile = document.getElementById('chooseFile');
    const uploadFile = document.getElementById('uploadFile');
    const progress = document.getElementById('progress');
    const message = document.getElementById('message');
    const stopUpload = document.getElementById('stopUpload');
    const keepUpload = document.getElementById('keepUpload');
</script>

2、后端服务器

后端 server.js 初始代码如下：

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const fse = require('fs-extra');
const multiparty = require('multiparty');

const app = express();
// 设置静态文件目录
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 后续的接口配置代码

app.listen(3000, () => console.log('3000 端口启动成功'));

3、启动项目

在终端中执行以下命令启动后端 express 服务器：

node server.js

如果安装了 nodemon 插件，也可以用插件启动服务器（服务器可自动重启）：

nodemon server.js

服务器启动成功后，在浏览器中访问 http://localhost:3000 即可显示 index.html 页面。

三、分片上传（前端）

1、获取选中文件

let checkedFile = null; // 用户选中的文件
chooseFile.addEventListener('change', function (e) {
    const [file] = e.target.files;
    if(file) {
        checkedFile = file;
    }
})

2、文件切片

const chunkSize = 3 * 1024 * 1024; // 每一个分片的大小：3M
const chunksList = [];  // 用户选中文件的切片文件

// 上传文件
uploadFile.addEventListener('click', function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;  
    // 文件切片
    createChunks();
})
// 创建文件切片
const createChunks = () => {
    let start = 0;   // 切片文件的起始位置
    while (start < checkedFile.size) {
        // 文件切片
        const chunkItem = checkedFile.slice(start, start + chunkSize);
        // 将切片保存到全局的切片数组中
        chunksList.push(chunkItem);
        start += chunkSize;
    }
}

3、上传切片

我们通过 axios 来发送请求，所以需要在 index.html 中引入 axios，并配置基础路径：

<script src="./js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:3000';
    // ... 其他代码
</script>

将切片文件数据通过 formData 发送给后端：

// 上传文件
uploadFile.addEventListener('click', function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;
    // 文件切片
    const chunksList = createChunks();
    // 上传切片
    uploadChunks(chunksList);
})

// 上传切片
const uploadChunks = async () => {
    // 处理切片数据格式
    const formDataList = chunksList.map((chunkItem, index) => {
        let formData = new FormData();
        formData.append('file', chunkItem);   // 切片文件信息
        formData.append('fileName', checkedFile.name); // 完整文件名
        formData.append('chunkName', index);  // 切片名(将 index 作为每一个切片的名字)
        return formData;
    });
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            url: '/upload',
            data: formData,
            method: 'POST'
        })
    });
    // 等待所有切片上传完成
    await Promise.all(requestList);
}

四、分片上传（后端）

配置上传的切片文件的存储路径：

// 上传的切片文件的存储路径
const ALL_CHUNKS_PATH = path.resolve(__dirname, 'chunks');

配置 /upload 接口：

app.post('/upload', (req, res) => {
    const multipartyForm = new multiparty.Form();
    multipartyForm.parse(req, async (err, fields, files) => {
        if (err) {
            console.log('文件切片上传失败:', err);
            res.send({
                code: 0,
                message: '文件切片上传失败'
            });
            return;
        }
        // 前端发送的切片文件信息
        const [file] = files.file;
        // 前端发送的完整文件名 fileName 和分片名 chunkName
        const { fileName: [fileName], chunkName: [chunkName] } = fields;
        // 当前文件的切片存储路径（将文件名作为切片的目录名）
        const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
        // 判断当前文件的切片目录是否存在
        if (!fse.existsSync(chunksPath)) {
            // 创建切片目录
            fse.mkdirSync(chunksPath);
        }
        // 将前端发送的切片文件移动到切片目录中
        await fse.move(file.path, `${chunksPath}/${chunkName}`);
        res.send({
            code: 1,
            message: '切片上传成功'
        })
    })
})

五、合并分片（前端）

等到所有的切片上传完成后，发送 /merge 请求合并切片：

// 合并切片
const mergeChunks = async () => {
    const { data } = await axios({
        url: '/merge',
        method: 'POST',
        data: {
            chunkSize,
            fileName: checkedFile.name
        }
    });
    if(data.code) {
        message.innerText = '文件上传成功';
    }
}

// 上传切片
const uploadChunks = async (chunksList) => {
    // ....
    // 等待所有切片上传完成
    await Promise.all(requestList);
    mergeChunks();
}

六、合并分片（后端）

配置切片合并完成后的完成文件存储路径：

// 切片合并完成后的文件存储路径
const UPLOAD_FILE_PATH = path.resolve(__dirname, 'public/files');

配置合并切片接口 /merge 代码：

app.post('/merge', async (req, res) => {
    // 获取前端发送的参数
    const { chunkSize, fileName } = req.body;
    // 当前文件切片合并成功后的文件存储路径
    const uploadedFile = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 找到当前文件所有切片的存储目录路径
    const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
    // 读取所有的切片文件，获取到文件名
    const chunksName = await fse.readdir(chunksPath);
    // 对切片文件名按照数字大小排序
    chunksName.sort((a, b) => (a - 0) - (b - 0));
    // 合并切片
    const unlinkResult = chunksName.map((name, index) => {
        // 获取每一个切片路径
        const chunkPath = path.resolve(chunksPath, name);
        // 获取要读取切片文件内容
        const readChunk = fse.createReadStream(chunkPath);
        // 获取要写入切片文件配置
        const writeChunk = fse.createWriteStream(uploadedFile, {
            start: index * chunkSize,
            end: (index + 1) * chunkSize
        })
        // 将读取到的 readChunk 内容写入到 writeChunk 对应位置
        readChunk.pipe(writeChunk);

        return new Promise((resolve) => {
            // 文件读取结束后删除切片文件(必须要将文件全部删除后，才能才能外层文件夹)
            readChunk.on('end', () => {
                fse.unlinkSync(chunkPath);
                resolve();
            });
        })
    })
    // 等到所有切片文件合并完成，且每一个切片文件都删除成功
    await Promise.all(unlinkResult);
    // 删除切片文件所在目录
    fse.rmdirSync(chunksPath);
    res.send({
        code: 1,
        message: '文件上传成功'
    })
})

七、秒传（前端）

秒传，指的就是用户当前选择上传的文件，之前已经传递过，就可以直接提示上传成功。

前端发送 /verify 请求到后端，用于判断当前文件是否已经上传过：

// 上传文件
uploadFile.addEventListener('click', async function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;

    // 验证文件之前是否上传成功过
    const res = await verifyFile();
    if(res.code) {
        message.innerText = "上传成功（秒传）";
        return;   // 终止后续代码的执行
    }

    // 文件切片
    const chunksList = createChunks();
    // 上传切片
    uploadChunks(chunksList);
})

// 验证文件是否上传过
const verifyFile = async () => {
    const { data } = await axios({
        url: '/verify',
        method: 'POST',
        data: {
            fileName: checkedFile.name
        }
    });
    return data;
}

八、秒传（后端）

app.post('/verify', (req, res) => {
    // 获取前端发送的文件名
    const { fileName } = req.body;
    // 获取当前文件路径（如果上传成功过的保存路径）
    const filePath = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 判断文件是否存在
    if (fse.existsSync(filePath)) {
        res.send({
            code: 1,
            message: '文件已存在，不需要重新上传'
        });
        return;
    }
    res.send({
        code: 0,
        message: '文件未上传过'
    })
})

九、暂停上传（前端）

暂停上传，是通过取消 axios “切片上传”请求的发送，来实现文件暂停上传：

const CancelToken = axios.CancelToken;
let source = CancelToken.source();

// 暂停上传
stopUpload.addEventListener('click', function () {
    // 取消后续所有“切片上传”请求的发送
    source.cancel('终止上传！');
    // 重置 source
    source = CancelToken.source();
    message.innerText = "暂停上传";
})

// 上传切片
const uploadChunks = async (chunksList) => {
    // ...
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            url: '/upload',
            data: formData,
            method: 'POST',
            cancelToken: source.token,   // 添加 cancelToken，用于后续取消请求发送
        })
    });
    // ....
}

十、断点续传（后端）

断点续传，就是要判断当前文件是否上传完成，如果没有上传完成，就需要找到已上传的其中一部分。

因此，“断点续传”和“验证文件是否上传成功过”可以使用同一个后端接口：

app.post('/verify', async (req, res) => {
    // 获取前端发送的文件名
    const { fileName } = req.body;
    // 获取当前文件路径（如果上传成功过的保存路径）
    const filePath = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 判断文件是否存在
    if (fse.existsSync(filePath)) {
        res.send({
            code: 1,
            message: '文件已存在，不需要重新上传'
        });
        return;
    }

    // 断点续传：判断文件是否有上传的一部分切片内容
    // 获取该文件的切片文件的存储目录
    const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
    // 判断该目录是否存在
    if (fse.existsSync(chunksPath)) {
        // 目录存在，则说明文件之前有上传过一部分，但是没有完整上传成功
        // 读取之前已上传的所有切片文件名
        const uploaded = await fse.readdir(chunksPath);
        res.send({
            code: 0,
            message: '该文件有部分上传数据',
            uploaded
        });
        return;
    }
    
    res.send({
        code: 0,
        message: '文件未上传过'
    })
})

十一、断点续传（前端）

// 上传文件
uploadFile.addEventListener('click', async function () {
    // ...
    // 上传所有切片
    uploadChunks(res.uploaded);  // 将已上传的部分数据传递过去
})
// 点击续传按钮
keepUpload.addEventListener('click', async function () {
    const res = await verifyFile();
    if (!res.code) {
        // 只要没有上传成功，不管是否有之前的上传记录，都需要继续上传
        uploadChunks(res.uploaded);  // 将已上传的部分数据传递过去
    }
})

// 上传切片
const uploadChunks = async (uploaded = []) => {
    // 处理切片数据格式
    // ...
    // 将处理好的文件切片 formData 数据中，还未上传的部分筛选出来
    formDataList = formDataList.filter((_, index) => uploaded.indexOf(index + '') < 0);

    // 依次上传每一个切片文件
    // ...
}

十二、进度条

// 上传文件
uploadFile.addEventListener('click', async function () {
    // ...

    // 验证文件之前是否上传成功过
    const res = await verifyFile();
    if (res.code) {
        message.innerText = "上传成功（秒传）";
        progress.value = progress.max;   // 将文件最大值设置为进度条的 value 值
        return;   // 终止后续代码的执行
    }
    // ...
})

// 上传切片
const uploadChunks = async (uploaded = []) => {
    // 将之前已上传的切片数量设置为当前进度条的进度
    progress.value = uploaded.length; 
    // ...
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            // ...
        }).then(() => {
            // 每一个切片上传成功后，进度条都 +1
            progress.value++;
        })
    });
    // 等待所有切片上传完成
    // ...
}

// 创建文件切片
const createChunks = () => {
    // ...

    // 将文件切片的总数作为进度条的最大值
    progress.max = chunksList.length;
}

十三、前端异步请求发展

最开始都是采用后端进行渲染。页面、数据都在后端

由后端来进行页面的渲染，返回一个完整页面给前端。

点击页面按钮，浏览器本地会执行js脚本，只要涉及数据交互，都是后端处理。

在浏览器里面提出了ajax技术

可以在浏览器发送异步请求，最早微软设计出来放在IE浏览器里面使用。

原生ajax封装

现在所有浏览器都支持ajax技术。

ajax技术独立技术：原生代码主要分为三个步骤

// 步骤一：前端建立请求.XMLHttpRequest 是ajax的核心对象。负责链接、请求、监听
let xmlhttp = new XMLHttpRequest()
//建立连接 true异步请求 false改成同步
xmlhttp.open("http://127.0.0.1:3000","POST",true)

//步骤二：前端发送请求到后端
xmlhttp.send("id=1&name=xiaowang")

//步骤三：监听状态码，判断成功还是失败
//当你发送一个请求的时候，状态码一直在变化的。 100-200 200 - 500
xmlhttp.onreadystatechange = function(){
    //status等于200 表示成功。这个时候不一定后端将数据传输回来了
    //readyState 对象状态 4代表后端数据传输完毕
    if(xmlhttp.status == 200 && xmlhttp.readyState==4){
       //成功获取结果
        const res = xmlhttp.responseText
        const obj = JSON.parse(res)
    }else if(xmlhttp.status == 404){
             
     }
}

考虑封装为函数

function ajax({url,method="GET",async=true,data={},success,error}){
    // 步骤一：前端建立请求.XMLHttpRequest 是ajax的核心对象。负责链接、请求、监听
    let xmlhttp = new XMLHttpRequest()
    //建立连接 true异步请求 false改成同步
    xmlhttp.open(url,method,async)

    //步骤二：前端发送请求到后端
    xmlhttp.send(data)

    //步骤三：监听状态码，判断成功还是失败
    //当你发送一个请求的时候，状态码一直在变化的。 100-200 200 - 500
    xmlhttp.onreadystatechange = function(){
        //status等于200 表示成功。这个时候不一定后端将数据传输回来了
        //readyState 对象状态 4代表后端数据传输完毕
        if(xmlhttp.status == 200 && xmlhttp.readyState==4){
           //成功获取结果
            const res = xmlhttp.responseText
            const obj = JSON.parse(res)
            success(obj)
        }else if(xmlhttp.status == 404){
			error("错误结果")
         }
    }
}

调用ajax函数完成请求发送

ajax({
    url:"http://127.0.0.1:3000",
    method:"GET",
    data:{id:1,name:"xiaowang"},
    success(msg){
        console.log(msg)
    },
    error(msg){
        
    }
})

实际上大家在学习jquery的时候，用过jquery的ajax

$.ajax({
    url:"",
    method:"",
    data:"",
    success(){
        
    }
})

总结：

为了方便大家使用ajax代码。jquery库将ajax代码进行封装。

一般没有使用框架开发项目，一般都选中jquery处理请求

解决回调地狱问题

//请求获取学生数据
ajax({
    url:"http://127.0.0.1:3000/student",
    method:"POST",
    data:{},
    success(msg){
        ajax({
            url:"http://127.0.0.1:3000/teacher",
            method:"GET",
            data:{msg.teacherId},
            success(msg2){
                
            }
        })
    }
})

形成了回调地狱。一旦代码复杂了，很难进行维护的。

Promise技术，ES6提出的容器。解决我们回调地狱的这种情况

function myaxios({url,method,data}){
    return new Promise((resolve,reject)=>{
       //请求获取学生数据
        ajax({
            url:url,
            method:method,
            data:data,
            success(msg){
                resolve(msg)
            },
            error(msg){
                reject(msg)
            }
        })
    })
}

myaxios({
    url:"http://127.0.0.1:3000/student",
    method:"post",
    data:{id:1}
}).then(res=>{
    
}).catch(error=>{
    
})

使用axios的时候代码如下：

import axios from "axios"

async function fetchData(){
    const res = await axios({
        url:"",
        method:"",
        data:{}
    })
}


axios({
    url:"",
    method:"",
    data:{}
}).then(res=>{
    
})

总结：

  1. jquery的ajax请求实际上就是封装了原生ajax代码。提供了一个工具。
  2. jquery的ajax会出现请求嵌套问题，回调地狱问题
  3. 引入Promise对象来异步请求的处理。让每个请求都独立设计。避免回调地狱
  4. Promise+ajax进行封装。完成axios这种第三方请求工具设计。

axios是一个第三方的请求工具，底层就是将原生ajax和promise进行了封装。我们在发送请求时候。每次默认获取promise对象。根据这个对象获取请求结果

无处安放的波澜
关注
专栏目录
Python上传和下载阿里云盘的实战代码
herosunly的博客
10-09 4万+
本文主要介绍了Python上传和下载阿里云盘的实战代码，希望对在不同环境下进行阿里云盘文件的上传和下载的同学们有所帮助。 文章目录 1. 前言 2. 安装Python库 3. 实战代码 3.1 上传文件夹 3.2 下载文件夹 3.3 下载文件
web大文件上传代码
09-16
HttpUploader4全面升级了文件IO组件。新的IO组件在处理磁盘中的文件时，将不必再对文件执行I/O操作，这意味着在对文件进行处理时将不必再为文件申请并分配缓存，所有的文件缓存操作均由系统直接管理，由于取消了将文件数据加载到内存、数据从内存到文件的回写以及释放内存块等步骤，使得HttpUploader4在处理TB级数据时能够拥有闪电般的速度。 新的IO组件赋予了HttpUploader4更强的大数据处理能力。现在HttpUploader4在对GB级文件进行MD5校验时速度提高了4倍。同时CPU占用率更低。 HttpUploader4更加注重对硬盘的保护，在HttpUploader4中不再直接对文件进行I/O操作，而是在内存中对文件进行操作，所以不仅极大的减少了对硬盘的读写次数，同时速度却变的更快了。 借助于HttpUploader4企业能够帮助用户更加轻松的处理工作中的文件，让用户与用户之间的沟通更加的高效。从根本上提高企业竞争力。 考虑到不同的企业使用的开发平台不同，我们已经为企业开发人员提供了完整的与数据库相结合的示例(ASP.NET,JSP,PHP)。开发人员能够非常容易的在自已的系统中实现断点续传功能。 产品特点如下： 1. 为TB级文件提供稳定传输功能。 2. 优化MD5组件，文件扫描速度提升70%。 3. 保护磁盘，上传超大文件时，磁盘IO次数降低50%。 4. 采用全新设计IO组件，上传任意文件大小时始终占用128KB内存。 5. 支持文件及文件夹拖拽上传功能。 6. 支持文件批量上传。 7. 支持文件夹上传。 8. 基于标准HTTP协议。 9. 免费提供JavaScript SDK包，方便您将插件快速集成到已有网站中。 支持语言：PHP,JSP,ASP,ASP.NET(C#),ASP.NET(VB),C++,VC,VC.NET,VB,VB.NET,C#,C#.NET,Delphi,C++Builder 支持平台：Visual Studio 6.0/2002/2003/2005/2008/2010,C++ Builder 6.0/2009/2010,Delphi 7/2009,Visual Basic 6.0/2008,MyEclipse8.x 支持脚本：JavaScript,VBScript 支持服务器：Windows NT,Windows 2003,Windows XP,Windows Vista,Windows 7,Linux,Unix 支持浏览器：IE6,IE7,IE8,360安全浏览器,QQ浏览器,搜狐浏览器,Maxthon(遨游)浏览器1.X,Maxthon(傲游)浏览器2.x 支持文件大小：2G~8EB(1EB=102PB,1PB=1024TB,1TB=1024GB) 支持文件类型：任意类型 版权所有 2009-2012 武汉命运科技有限公司 保留所有权利 官方网站：http://www.ncmem.com/ 产品首页：http://www.ncmem.com/webplug/http-uploader3/index.aspx 在线演示：http://www.ncmem.com/products/http-uploader3/demo/index.html 产品介绍：http://www.cnblogs.com/xproer/archive/2012/05/29/2523757.html 开发文档-ASP：http://www.cnblogs.com/xproer/archive/2012/02/17/2355458.html 开发文档-PHP：http://www.cnblogs.com/xproer/archive/2012/02/17/2355467.html 开发文档-JSP：http://www.cnblogs.com/xproer/archive/2012/02/17/2355462.html 开发文档-ASP.NET：http://www.cnblogs.com/xproer/archive/2012/02/17/2355469.html 升级日志：http://www.cnblogs.com/xproer/archive/2012/02/17/2355449.html 资源下载：cab安装包,开发文档, 示例下载(ASP.NET)：ASP.NET-ACCESS示例 示例下载(JSP)：JSP-ACCESS示例(GB2312),JSP-ACCESS示例(UTF-8),JSP-Sql2005示例(UTF-8),JSP-MySQL示例(UTF-8) 示例下载(PHP)：MySQL示例(UTF-8) 问题反馈：http://www.ncmem.com/bbs/showforum-4.aspx VC运行库：http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=29 联系信箱：1085617561@qq.com 联系QQ：1085617561
大文件上传代码
weixin_45251876的博客
06-14 506
针对于大文件上传进行代码整理,也方便后续使用,方便整理学习实体类BigFile BigFileUploadController BigFileService(接口) BigFileServiceImpl(接口实现类) 需要使用的两个工具类 BigFileUtils UploadUtils 总结 总体思路: 1,前端进行文件切片 2,前端发送请求中包括 3.后端采用RandomAccessFile 类进行文件的接收,针对于该类,有兴趣的小伙伴可以自行查资料学习,挺方便实用的. 4.针对于每次切片后的文件进行合
浏览器大文件上传详解及实例代码
最新发布
alisky119的博客
08-22 1056
最近这块好像挻火的，今天早上又有一位网友加我微信，也是想了解这块的技术和方案，实际上我的微信之前就已经在网上公开了，但是论坛里面很多网友还是不知道。昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
JAVA+上传一个文件夹
alisky119的博客
07-24 640
数据库支持MySQL,Oracle,达梦数据库,人大金仓，需要提供前端源码，后端源码，控件源码，公司自己的项目，也有自己的产品，后续需要集成使用，提供7*24小时技术支持服务，提供文档教程，视频教程，远程技术指导，1对1技术支持服务，提供手机，微信，QQ，邮箱，企业微信等联系方式。免费提供7*24小时技术支持，免费提供微信技术支持，免费提供电话技术支持，免费提供QQ技术支持，免费提供远程协助,免费提供远程代码调试服务，免费提供业务逻辑代码定制开发服务，免费提供驻场开发，免费提供上门服务。
java实现大文件上传源代码
weixin_45525177的博客
08-13 374
一、 功能性需求与非功能性需求 要求操作便利，一次选择多个文件和文件夹进行上传； 支持PC端全平台操作系统，Windows,Linux,Mac 支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。 支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验； 支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。 支持断点续传，关闭浏览器或刷新浏
B/S web 大文件上传源代码
Mr_Zang666的博客
03-18 171
众所皆知，web上传大文件，一直是一个痛。上传文件大小限制，页面响应时间超时.这些都是web开发所必须直面的。 本文给出的解决方案是：前端实现数据流分片长传，后面接收完毕后合并文件的思路。 实现文件夹上传，要求：服务端保留层级结构，支持10w级别的文件夹上传。 大文件上传及断点续传，要求：支持50G级的单个文件上传和续传。续传要求：在刷新浏览器后能够续传上传，在重启浏览器后能够继续上传上（关...
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）后端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）前端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
下拉框选择，文件上传，cookie操作与实战代码示例
12-26
本次我们将探讨四个关键知识点：下拉框选择、文件上传、Cookie操作以及实战代码示例，这些都是UI自动化测试中常见的场景。 1. **下拉框选择**： 下拉框在Web界面中广泛应用，用于提供用户多项可选的选项。在自动化...
Jquery Large File Upload (Jquery实现大文件上传)
05-02
在Web开发中，大文件上传是一项常见的需求，尤其是在多媒体内容丰富的网站中。jQuery Large File Upload是一种解决方案，它利用jQuery库来实现对大文件的有效上传。本文将深入探讨这个主题，介绍如何利用jQuery和PHP...
web项目支持大文件上传的代码
01-22
web项目支持大文件上传的代码，纯jsp实现，理解简单，可直接用在项目中。整合比较简单，文档全面。
java web 大文件上传源代码，找了好久改了下，这是最完整的
01-19
java web 大文件上传源代码，找了好久，分享给大家，加入了缺少的jar包，这是目前为止找到的最为完整的项目了，所有的java类，jar包，数据表脚本全部都齐全了。
Java大文件上传详解及实例代码
weixin_52041354的博客
02-17 272
需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步： 前端修改 由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中， 在bjui-all.js文件中的全局变量定义中有以下
前端上传大型文件或超长数据的解决办法
weixin_52041354的博客
08-20 1256
最近这块好像挻火的，今天早上又有一位网友加我微信，也是想了解这块的技术和方案，实际上我的微信之前就已经在网上公开了，但是论坛里面很多网友还是不知道。昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
大文件上传
lan7798的博客
10-27 4712
大文件上传
全网最简单的大文件上传与下载代码实现（React+Go）
「 虚幻私塾」
09-07 1149
前段时间我需要实现大文件上传的需求，在网上查找了很多资料，并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能。我的项目是个比较简单的项目，并没有采用特别复杂的实现方式，所以我这篇文章的目的主要是讲如何最简单地实现大文件上传与下载这个功能，不会讲太多原理之类的东西。
超大文件上传源代码
weixin_45525177的博客
05-17 407
需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步： 前端修改 由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中， 在bjui-all.js文件中的全局变量定义中有以下
JSP简易文件上传组件实战教程
文章强调，尽管Apache Commons FileUpload和SmartUpload等第三方组件在文件上传方面被广泛使用，但本文选择不依赖这些外部库，而是仅通过JSP代码来实现，以展示其简洁性和易用性。 实现方法分为以下几个步骤： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值