最近有视频上传的需求，所以决定写几篇文章来讲解一下。这些文章能写到的内容如下： * 前端如何拿到文件对象。 * 前端处理文件对象有哪些方式。 * axios进行前后端通信时，文件数据应该如何传输？ * node拿到数据后，应该如何处理？ * 如果是大文件，如何提高文件上传的效率？ * 如果是大文件，前端下载时，如何提高下载的效率？在写这篇文章的时候，它的基调还没有确定下来，总想把视频处理上升到文件处理。但是文件处理这个话题涉及的面还比较广，但是2023年11月19日晚上23:29分，我决定了，不扩展了，就只写视频，如果我有精力去写其他文件的处理，再把他们合并到一个专栏里也不晚。 ## 一、环境搭建 ### 初始化项目前端搭建就不说了，使用create-react-app脚手架可以快速的帮你搭建好一个react项目，当然你也可以使用我写出来的工具`lazy-create-react-app`去搭建一个非常简单的react项目。如果你真的想用我这个工具，请运行：`npx lazy-create-react-app [自定义项目名称]`。后端我们使用express来搭建后端工程。具体操作如下： ```javascript // 1、第一步(安装express脚手架) npm install -g express-generator // 2、第二步(使用脚手架创建一个名为“end”的项目) express end // 3、第三步(进入项目目录) cd end // 4、第四步(安装项目依赖) npm install // 5、修改后端项目的端口号 // 6、第五步(启动项目) npm run start ``` 修改后端的端口号如下，否则前后端项目同时启动的时候，他们两个会因为使用相同的端口号而导致冲突： ![截屏2023-11-19 23.51.36.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bfac7255fcb43bf9ba64f8ffd6932d8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2628&h=506&s=152909&e=png&b=28292a) 接着，我们来为本次的内容注册专门的路由： routes目录下新增video.js文件，video.js文件内容如下： ```javascript var express = require('express'); var router = express.Router(); router.get('/', (req, res, next) => { res.send({ msg: '路由注册成功' }); }); module.exports = router; ``` ![截屏2023-11-20 00.10.38.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b70de1115c2745858964d9f9c6c1f29e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=530&h=610&s=54056&e=png&b=252627) 紧接着，我们来修改下app.js文件内容： ```javascript // 其余文件内容不变 ===== var videoRouter = require('./routes/video'); app.use('/video', videoRouter); // 其余文件内容不变 ===== ``` 至此，初始化的工作就完毕了。 ### 前后端联调后端需要安装cors依赖，请执行如下命令： ```javascript npm install cors --save ``` 依赖安装成功后，继续修改app.js文件内容： ```javascript // 其余文件内容不变 ===== var cors = require('cors'); app.use(cors()); // 其余文件内容不变 ===== ``` 接下来，我们在前端项目里新增一个Video页面，但是在操作前，我们还需要安装2个依赖，分别是react-router、axios。请执行以下命令： ```javascript npm install react-router axios --save ``` 修改前端项目里的index.js文件，并新增Video文件。 ```jsx // app.js文件如下： import { createBrowserRouter, RouterProvider, Route } from 'react-router-dom'; import Video from './Video'; const router = createBrowserRouter([ { path: '/', element: , }, { path: '/video', element: