[文件上传] 大文件切片上传前后端处理代码示例（JS / Node / Koa）【B站有对应的讲解视频】

已于 2024-08-13 21:26:58 修改
阅读量670 收藏 7
点赞数 26
文章标签： javascript 前端 开发语言
于 2024-08-13 20:22:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73220073/article/details/141172883
版权

Client 前端处理部分视频讲解
Server 后端处理部分视频讲解

文件切片上传（切片）

Client:

  • html 基本结构搭建

    • <style>
    body>div {
          margin: 8px; }
</style>

<body>
    <h4>deng-cl</h4>
    <div>
        <input type="file" id="file">
    </div>
    <div>
        <button class="upload">上传</button>
    </div>
    <script type="module" src="./src/index.js"></script>
</body>

  • JS 常量定义

    • import axios from "axios"; // -- 依赖库

// -- 操作提示
    const UPLOAD_INFO = {
        
        "NOT_SELETED_FLIE": "请先选择文件",
        "NOT_SUPPORTED_TYPE": "不支持该文件类型",
        "FETCH_SUCCESS": "上传成功",
        "FETCH_FAILED": "上传失败"
    };

// -- 文件类型限制 / 切片大小定义
    const ALLOWEN_TYPE = ["image"];
    const CHUNK_SIZE = 1024 * 1024;

// -- 请求
    const BASE_URL = "http://localhost:3000";
    const FETCH_API = {
       
        "UPLOAD": "/upload",
        "MERGE": "/merge",
    };

  • 获取文件上传的 input 与 upload 按钮 DOM 元素

    • const fileInputEl = document.querySelector("#file") // -- input dom
const uploadButtonEl = document.querySelector(".upload") // -- button

  • 监听 upload 按钮点击执行文件上传操作

    • uploadButtonEl.addEventListener("click", handleFileUpload, false)

    • 对应处理函数代码如下 → 🔺里面使用其它的函数统一放在 "辅助函数栏" 中（使用 "▲ util" 进行标记）

    • async function handleFileUpload() {
        // -- 1. 点击上传按钮，触发该函数
    const files = fileInputEl
最低0.47元/天 解锁文章
小孔_H
关注
  • 26
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Koa2 之文件上传下载的示例代码
01-20
我们可以用 koa-body 中间件来处理文件上传，它可以将请求体拼到 ctx.request 中。 // app.js const koa = require('koa'); const app = new koa(); const koaBody = require('koa-body'); app.use(koaBo
node+mysql+koa+sequelize自学练手项目--用户登陆注册+联表查询+文件上传
01-08
1. **Node.js**：Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让开发者可以在服务器端使用JavaScript编写代码，提供了丰富的模块化生态系统，简化了服务器端开发。 2. **Koa.js**：Koa是Node.js的一个...
写给初中级前端的高级进阶指南（万字路线）
kjssjj12的博客
07-07 815
前言 以下文章来源于公众号前端从进阶到入院 ，作者ssh前端 由于公众号文章不允许外链，需要跳转文中链接的同学可以在脚注里找到各个的资源链接，也可以通过点击阅读原文更加方便的跳转链接。 我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。 这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，
HLS + ffmpeg 实现动态码流视频服务
yinshipin007的博客
04-11 427
如下图，包含三部分，右边一列为边缘节点；中间一列代表数据中心；左边一列是项目为客户提供的一系列web管理工具：具体来说在我们项目中有一堆边缘节点，每个节点上部署一台强大的GPU服务器及N个网络摄像头，服务器持续记录摄像头的高清码流，同时跑模型持续分析视频内容；边缘服务器与数据中心之间有一条网络链路，但「带宽非常小」，通常只作数据、控制命令下发用；数据中心部署了一系列web服务，为不同用户提供审阅系统运行情况及发布操作边缘节点命令的端口。那么问题来了，终端用户通常并不关心摄像头录制到的视频，但「偶尔」
代码知识点
wangzilong8的博客
10-16 1781
https://juejin.im/post/5dafb263f265da5b9b80244d JS&基础知识篇： 1、事件流 分为捕获型、冒泡型，addEventListener的第三个参数，为true是捕获型，为false是冒泡型（即默认不写是冒泡型） 常用的事件：click、mouseover（支持冒泡）、mouseout（支持冒泡）、mouseenter（不支持冒...
RC TE
weixin_43127990的博客
02-27 361
FIBER REACT 什么是不可变值 函数式编程是指程序里面的函数和表达式都能像数学中的函数一样，给定了输入值，输出是确定的。比如 let a = 1; let b = a + 1; => a = 1 b = 2; 变量b出现，虽然使用了变量a的值，但是没有修改a的值。 再看我们熟悉的react中的代码，假如初始化了this.state = { count: 1 } componentDidMount() { const newState = { ...state, count: 2
前端面试题之React篇
爱是与世界平行
05-28 5126
前端面试题之React篇一、组件基础1. React 事件机制2. React的事件和普通的HTML事件有什么不同？3. React 组件中怎么做事件代理？它的原理是什么？4. React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代5. 对React-Fiber的理解，它解决了什么问题？6. React.Component 和 React.PureComponent 的区别7. Component, Element, Instance 之间有什么区别和联系？8. React
react-面试题
qq_16546829的博客
03-13 733
（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值。
利用Node.js+Koa框架实现前后端交互的方法
01-20
本文将深入探讨如何使用Node.js和Koa框架实现前后端交互，这对于前端工程师全面理解整个Web应用的工作流程至关重要。 首先，我们要了解Koa。Koa是由Express团队开发的一个轻量级的Web应用框架，它旨在简化Web应用的...
在Koa.js中实现文件上传的接口功能
12-13
文件上传是一个基本的功能，每个系统几乎都会有，比如上传图片、上传Excel等。 那么在Node Koa应用中如何实现一个支持文件上传的接口呢？ 本文从环境准备开始、最后分别用 Postman 和一个HTML页面来测试。 01—环境...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 463
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 593
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
song854601134的博客
08-12 118
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 314
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 415
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 446
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 656
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
【Vue3】图片未加载成功前占位
菜就多练
08-08 328
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
利用node koa koa-body URL.createObjectURL 实现前后端上传文件生成url
06-03
为了实现前后端上传文件生成url，需要先创建一个前端页面，用于上传文件并显示上传文件的url。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>上传文件</title> </head> <body> <input type="file" id="fileInput" /> <button onclick="uploadFile()">上传文件</button> <br /><br /> <div id="fileUrl"></div> <script> function uploadFile() { const file = document.getElementById('fileInput').files[0]; const formData = new FormData(); formData.append('file', file); fetch('/upload', { method: 'POST', body: formData }) .then((res) => res.json()) .then((data) => { document.getElementById('fileUrl').innerHTML = `文件上传成功，url为: ${data.data.url}`; }) .catch((err) => { console.error(err); }); } </script> </body> </html> ``` 这是一个简单的上传文件的页面，包含一个文件选择框和一个上传按钮，当用户选择完文件并点击上传按钮后，会向服务器发送上传文件的请求，服务器返回上传文件对应的url，并在页面上显示该url。 接下来，需要在服务器端实现文件上传和生成url。可以使用koa和koa-body这两个依赖包来实现。以下是一个简单的示例： ```javascript const Koa = require('koa'); const koaBody = require('koa-body'); const { createWriteStream } = require('fs'); const { createObjectURL } = require('url'); const app = new Koa(); // 设置上传文件的存储路径 const uploadPath = './public/uploads/'; // 设置上传文件的最大大小为10MB app.use(koaBody({ multipart: true, formidable: { maxFileSize: 10 * 1024 * 1024 } })); // 处理文件上传请求 app.use(async (ctx) => { // 上传的文件对象 const file = ctx.request.files.file; // 文件保存的路径 const filePath = uploadPath + file.name; // 创建可写流 const stream = createWriteStream(filePath); // 写入文件 await new Promise((resolve, reject) => { stream.on('finish', resolve); stream.on('error', reject); file.pipe(stream); }); // 生成文件的url const fileUrl = createObjectURL(file); // 返回文件的url ctx.body = { status: 'success', data: { url: fileUrl, }, }; }); // 启动服务器 app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 这段代码实现了一个简单的文件上传功能，将上传的文件保存到本地的指定路径，并且返回上传文件对应的url。在前端页面上传文件后，会向服务器发送上传文件的请求，服务器处理请求并返回上传文件对应的url，前端页面收到响应后，将上传文件的url显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值