当前位置:   article > 正文

前端文件上传实践与后端处理——文件分块上传_前端上传文件到后端

前端上传文件到后端

文件上传是现代Web应用程序中常见的功能之一。在这篇博客中,我们将探讨一个简单但完整的前端文件上传实践,同时提供一个后端示例,演示如何处理上传的文件。我们将使用JavaScript作为前端语言,并结合Node.js作为后端环境。让我们开始吧!

前端文件上传

我们首先关注前端部分。我们将使用HTML、CSS和JavaScript来创建一个简单的文件上传表单,然后通过AJAX将文件传递给后端服务器。这里我们假设你已经具备了基本的前端开发知识。

1. HTML结构

首先,我们创建一个HTML结构,包含一个文件上传输入框、上传按钮和用于显示上传进度和信息的元素:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>文件上传示例</title>
  7. </head>
  8. <body>
  9. <input type="file" id="videoUploader" accept="video/mp4, video/ogg">
  10. <button id="uploadBtn">上传</button>
  11. <p id="uploadInfo"></p>
  12. <progress id="uploadProgress" value="0" max="100"></progress>
  13. </body>
  14. </html>

2. CSS样式(可选)

你可以根据需要添加一些CSS样式来美化页面。

3. JavaScript逻辑

接下来,我们将使用JavaScript来实现文件上传逻辑。我们从一个配置文件开始,然后实现上传函数和相关的辅助函数:

  1. // config.js
  2. // 导出一些常量,包括上传信息、允许上传的文件类型、块大小和上传接口的URL
  3. // 这些常量将在前端和后端代码中使用
  4. const BASE_URL = 'http://localhost:8000/';
  5. export const UPLOAD_INFO = {
  6. 'NO_FILE': '请先选择文件',
  7. 'INVALID_TYPE': '不支持该类型文件上传',
  8. 'UPLOAD_FAILED': '上传失败',
  9. 'UPLOAD_SUCCESS': '上传成功'
  10. }
  11. export const ALLOWED_TYPE = {
  12. 'video/mp4': 'mp4',
  13. 'video/ogg': 'ogg'
  14. }
  15. export const CHUNK_SIZE = 64 * 1024;
  16. export const API = {
  17. UPLOAD_VIDEO: BASE_URL + 'upload_video'
  18. }
  19. // index.js
  20. // 在闭包内部,定义一个立即执行的匿名函数,接受document作为参数
  21. ((doc) => {
  22. // 获取页面上的一些元素
  23. const oProgress = doc.querySelector('#uploadProgress'); // 上传进度条
  24. const oUploader = doc.querySelector('#videoUploader'); // 文件上传输入框
  25. const oInfo = doc.querySelector('#uploadInfo'); // 用于显示上传信息
  26. const oBtn = doc.querySelector('#uploadBtn'); // 上传按钮
  27. let uploadedSize = 0; // 已上传的文件大小,用于控制分块上传
  28. // 初始化函数
  29. const init = () => {
  30. bindEvent(); // 绑定事件
  31. }
  32. // 绑定事件函数
  33. function bindEvent() {
  34. oBtn.addEventListener('click', uploadVideo, false); // 点击上传按钮触发上传函数
  35. }
  36. // 异步上传函数
  37. async function uploadVideo() {
  38. // 获取文件对象
  39. const { files: [ file ] } = oUploader;
  40. if (!file) {
  41. // 检查是否选择了文件,如果没有则显示提示信息
  42. oInfo.innerText = UPLOAD_INFO['NO_FILE'];
  43. return;
  44. }
  45. if (!ALLOWED_TYPE[file.type]) {
  46. // 检查文件类型是否被允许,如果不允许则显示提示信息
  47. oInfo.innerText = UPLOAD_INFO['INVALID_TYPE'];
  48. return;
  49. }
  50. // 获取文件的一些基本信息
  51. const { name, type, size } = file;
  52. const fileName = new Date().getTime() + '_' + name;
  53. let uploadedResult = null;
  54. oProgress.max = size;
  55. oInfo.innerText = '';
  56. while (uploadedSize < size) {
  57. // 使用slice方法将文件切割成小块,实现分块上传
  58. const fileChunk = file.slice(uploadedSize, uploadedSize + CHUNK_SIZE);
  59. // 创建FormData对象,用于传递文件块和相关信息
  60. const formData = createFormData({
  61. name,
  62. type,
  63. size,
  64. fileName,
  65. uploadedSize,
  66. file: fileChunk
  67. });
  68. try {
  69. // 使用axios库发送POST请求,将文件块上传到后端
  70. uploadedResult = await axios.post(API.UPLOAD_VIDEO, formData);
  71. } catch (e) {
  72. // 捕获异常,如果上传失败,则显示提示信息
  73. oInfo.innerText = `${ UPLOAD_INFO['UPLOAD_FAILED'] }${ e.message })`;
  74. return;
  75. }
  76. // 更新已上传的文件大小和进度条
  77. uploadedSize += fileChunk.size;
  78. oProgress.value = uploadedSize;
  79. }
  80. // 上传成功后,显示上传成功的提示信息,并将文件输入框置空
  81. oInfo.innerText = UPLOAD_INFO['UPLOAD_SUCCESS'];
  82. oUploader.value = null;
  83. // 根据后端返回的视频URL,创建一个视频元素并展示在页面上
  84. createVideo(uploadedResult.data.video_url);
  85. }
  86. // 创建FormData函数,将文件块和相关信息添加到FormData对象中
  87. function createFormData ({
  88. name,
  89. type,
  90. size,
  91. fileName,
  92. uploadedSize,
  93. file
  94. }) {
  95. const fd = new FormData();
  96. fd.append('name', name);
  97. fd.append('type', type);
  98. fd.append('size', size);
  99. fd.append('fileName', fileName);
  100. fd.append('uploadedSize', uploadedSize);
  101. fd.append('file', file);
  102. return fd;
  103. }
  104. // 创建视频元素函数,用于在页面上展示上传成功的视频
  105. function createVideo(src) {
  106. const oVideo = document.createElement('video');
  107. oVideo.controls = true;
  108. oVideo.width = '500';
  109. oVideo.src = src;
  110. document.body.appendChild(oVideo);
  111. }
  112. init(); // 初始化,执行绑定事件函数
  113. })(document);
  1. 引入依赖项:

    • config.js:导出一些常量,包括上传信息、允许上传的文件类型、块大小和上传接口的URL。
    • axios:一个用于发起HTTP请求的库,用于将文件块上传到后端。
  2. 创建一个立即执行的匿名函数:

    • 接受document作为参数,并使用doc来代表document对象。
    • 这种方式可以避免全局变量污染,确保代码运行在独立的作用域中。
  3. 获取页面上的元素:

    • oProgress:代表上传进度条的<progress>元素。
    • oUploader:代表文件上传输入框的<input type="file">元素。
    • oInfo:用于显示上传信息的<p>元素。
    • oBtn:代表上传按钮的<button>元素。
  4. 初始化函数:

    • 调用bindEvent()函数,用于绑定点击上传按钮时的事件处理函数。
  5. 绑定事件函数:

    • 使用addEventListener()方法,为上传按钮添加一个点击事件监听器。
    • 当点击上传按钮时,将触发uploadVideo()函数进行文件上传。
  6. 异步上传函数uploadVideo()

    • 获取文件对象file,这是通过文件上传输入框oUploader获取的。
    • 检查是否选择了文件,如果没有则显示提示信息,并返回。
    • 检查文件类型是否被允许上传,如果不允许则显示提示信息,并返回。
    • 获取文件的一些基本信息,如文件名、文件类型和文件大小等。
    • 使用while循环,对文件进行分块上传:
      • 使用file.slice()方法将文件切割成小块(块大小由常量CHUNK_SIZE定义)。
      • 创建FormData对象,将文件块和相关信息添加到其中,用于传递给后端。
      • 使用axios.post()方法,将文件块上传到后端指定的URL(由常量API.UPLOAD_VIDEO定义)。
      • 如果上传失败,捕获异常并显示提示信息,并返回。
      • 更新已上传的文件大小和进度条的值。
    • 上传完成后,显示上传成功的提示信息,并将文件输入框的值置空。
    • 根据后端返回的视频URL,调用createVideo()函数在页面上创建视频元素并展示上传成功的视频。
  7. 创建FormData函数createFormData()

    • 将文件块和相关信息添加到FormData对象中,用于传递给后端。
  8. 创建视频元素函数createVideo()

    • 用于在页面上创建视频元素,并设置视频URL为上传成功后后端返回的视频URL。
  9. 初始化函数init()

    • 执行bindEvent()函数,将上传按钮和事件处理函数绑定在一起。
  10. 最后,通过调用init()函数来启动整个前端代码。

 

我们在前端代码中引入了axios库,这是一个用于发起HTTP请求的常用工具。在实际项目中,你需要确保在HTML文件中引入axios库,或者使用其他类似功能的库。

以上代码中,我们首先定义了一些常量,如允许上传的文件类型、块大小等。然后我们通过事件监听捕获“上传”按钮的点击事件,执行上传函数。在上传函数中,我们通过分块上传的方式,将文件切割为多个小块,并逐个发送给后端进行处理。上传过程中,我们还会实时更新上传进度条和显示上传信息。

后端文件处理

现在让我们关注后端处理部分。我们将使用Node.js和Express来搭建一个简单的后端服务器,接收前端传递的文件块,并将它们合并成完整的文件。

1. 安装依赖

首先,在项目目录下创建一个package.json文件,然后运行以下命令安装依赖:

以上代码使用Express框架搭建了一个简单的服务器,并设置了文件上传的路由。我们可以通过/upload_video接口来上传文件块,后端根据上传的信息,将文件块保存在服务器端,直到所有块都接收完成后,合并成完整的文件。

  1. npm init -y
  2. npm install express body-parser express-fileupload

2. 后端代码

接下来,我们创建一个server.js文件,编写后端代码:

  1. const express = require('express');
  2. const bodyParser = require('body-parser');
  3. const uploader = require('express-fileupload');
  4. const { extname, resolve } = require('path');
  5. const { existsSync, appendFileSync, writeFileSync } = require('fs');
  6. const app = express();
  7. const PORT = 8000;
  8. // 设置中间件,解析请求的JSON数据和文件上传
  9. app.use(bodyParser.urlencoded({ extended: true }));
  10. app.use(bodyParser.json());
  11. app.use(uploader());
  12. // 设置静态资源目录,用于存放上传的临时文件块
  13. app.use('/', express.static('upload_temp'));
  14. // 允许跨域访问
  15. app.all('*', (req, res, next) => {
  16. res.header('Access-Control-Allow-origin', '*');
  17. res.header('Access-Control-Allow-Methods', 'POST,GET');
  18. next();
  19. });
  20. // 处理文件上传的POST请求,对应的URL为/upload_video
  21. app.post('/upload_video', (req, res) => {
  22. // 从请求体中获取传递的文件信息和文件块
  23. const { name, type, size, fileName, uploadedSize } = req.body;
  24. const { file } = req.files;
  25. if (!file) {
  26. // 检查是否传递了文件块,如果没有则返回错误信息
  27. res.send({
  28. code: 1001,
  29. msg: 'No file uploaded'
  30. });
  31. return;
  32. }
  33. if (!ALLOWED_TYPE[type]) {
  34. // 检查文件类型是否被允许,如果不允许则返回错误信息
  35. res.send({
  36. code: 1002,
  37. msg: 'The type is not allowed for uploading.'
  38. });
  39. return;
  40. }
  41. const filename = fileName + extname(name);
  42. const filePath = resolve(__dirname, './upload_temp/' + filename);
  43. if (uploadedSize !== '0') {
  44. if (!existsSync(filePath)) {
  45. // 检查文件是否存在,如果不存在则返回错误信息
  46. res.send({
  47. code: 1003,
  48. msg: 'No file exists'
  49. });
  50. return;
  51. }
  52. // 文件已存在,则将当前文件块追加到已有的文件中
  53. appendFileSync(filePath, file.data);
  54. // 返回成功信息和视频URL
  55. res.send({
  56. code: 0,
  57. msg: 'Appended',
  58. video_url: 'http://localhost:8000/' + filename
  59. });
  60. return;
  61. }
  62. // 第一个文件块,创建一个新文件并写入当前块的数据
  63. writeFileSync(filePath, file.data);
  64. // 返回成功信息
  65. res.send({
  66. code: 0,
  67. msg: 'File is created'
  68. });
  69. });
  70. // 启动服务,监听指定端口
  71. app.listen(PORT, () => {
  72. console.log('Server is running on ' + PORT);
  73. });
  1. 引入依赖项:

    • express:Express框架,用于构建Web服务器。
    • body-parser:解析请求体中的JSON数据。
    • express-fileupload:处理文件上传请求。
    • path:Node.js内置模块,用于处理文件路径。
    • fs:Node.js内置模块,用于文件系统操作。
  2. 创建Express应用:

    1. const app = express();
    2. const PORT = 8000;

  3. 使用中间件:

    • bodyParser中间件用于解析请求体中的JSON数据和表单数据。
    • uploader中间件用于处理文件上传请求。
    • 设置静态资源目录'/upload_temp',用于存放上传的临时文件块。
  4. 设置跨域访问: 使用app.all()方法设置允许跨域请求的响应头。

  5. 处理文件上传请求:

    • 使用app.post('/upload_video', ...)定义处理文件上传的POST请求,对应的URL是/upload_video
    • 从请求体中获取传递的文件信息和文件块,包括文件名、文件类型、文件大小、文件块的上传起始位置等。
    • 检查文件块是否存在,如果不存在则返回错误信息。
    • 检查文件类型是否被允许,如果不允许则返回错误信息。
    • 根据文件名和文件类型生成新的文件名,并计算文件的存储路径。
    • 如果不是第一个文件块,将当前文件块追加到已有的文件中。
    • 如果是第一个文件块,创建一个新文件并写入当前块的数据。
    • 返回成功信息,并包含上传成功后的视频URL。
  6. 启动服务: 使用app.listen()方法启动服务器,监听指定的端口(在此例中为8000)。

 

运行项目

现在,我们已经完成了前端和后端的代码编写。接下来,我们需要在本地运行项目,以测试文件上传的功能。

1. 创建上传临时目录

在项目根目录下创建一个名为upload_temp的文件夹,用于保存上传的临时文件块。

2. 启动服务器

运行以下命令启动后端服务器:

node server.js

3. 启动前端

将前端代码(HTML、CSS和JavaScript)放置在一个文件夹中,然后在该文件夹下运行一个HTTP服务器(使用npm和yarn也没问题, npm install——npm run dev/yarn——yarn dev),比如使用http-server

npx http-server

现在,通过浏览器访问前端页面(通常是http://localhost:8080)。选择一个支持的视频文件(.mp4或.ogv格式),点击上传按钮,你将看到上传进度条显示上传进度。上传完成后,页面将显示上传成功的信息,并在页面上展示上传的视频文件。 

结束语

在本篇博客中,我们学习了如何实现一个简单的前端文件上传功能,并结合Node.js和Express搭建了一个后端服务器来处理文件上传。在实际项目中,你可以根据需求对文件上传的功能进行扩展和优化。希望这篇博客能够帮助你理解文件上传的基本原理和实践方法。谢谢阅读!

 

 

如果你对前端文件上传还有疑问,或者对其他技术主题感兴趣,欢迎加入讨论群或者关注!

 

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号