--- theme: fancy highlight: atom-one-dark --- 本文讲解实现文件上传的前后端逻辑，是[大文件上传实现专栏](https://juejin.cn/column/7322305256171700264)的第一篇文章，为专栏后面的其他进阶功能做铺垫。本文最终实现：后端上传接口，前端交互（点击选择文件、拖拽选择文件、上传文件以及上传进度条显示）。值得注意的是：我们接口处理文件并不是用的`multer`（解析FormData）, 而是以流的方式接收和处理。 ## 后端部分后端部分，用 `Express.js` 来做。需求是：要**接收**文件并以指定文件名 **保存**到特定文件夹下面。先创建项目和安装依赖： ```sh # 创建项目 mkdir server-by-express cd server-by-express npm init -y # 安装将用到的依赖 npm i express fs-extra cors ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39d4a853afd24220a38eeb131a85570f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1140&h=818&s=100102&e=png&b=000000) 新建项目之后，在vscode中打开，新建一个index.js文件，键入如下代码： ```js const express = require("express"); const cors = require("cors"); const fs = require("fs-extra"); const app = express(); app.use(cors()); app.get("/", (req, res) => { res.json({ message: "Hello World" }); }); app.listen(8080, () => { console.log("Server is running on port 3000"); }); ``` 在项目根目录下执行 `node index.js` 跑起来看下 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b85e2ac2e434dd98f4c936415745dd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3236&h=2050&s=266910&e=png&b=1d1d1d) 测试一下没问题 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/648d004d465a4cdcb8e1d30dc38d899f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=754&h=326&s=19436&e=png&b=212121) 下面开始业务相关代码：先确保文件上传的目录存在 ```js // 临时文件夹，文件将会被上传到这个文件夹中 const TEMP_DIR = path.resolve(__dirname, "temp"); // 确保临时文件夹存在 fs.ensureDir(TEMP_DIR); ``` 然后定义一个辅助函数，用来将可读流流入到可写流: ```js /** * 数据从可读流流向可写流 * @param {ReadableStream} rs 可读流 * @param {WritableStream} ws 可写流 * @returns 返回一个Promise，当流结束时，Promise会被resolve */ function pipeStream(rs, ws) { return new Promise((resolve, reject) => { rs.pipe(ws).on("finish", resolve).on("error", reject); }); } ``` 接下来实现上传文件接口: ```js app.post("/upload/:filename", async (req, res) => { // 获取文件名 const { filename } = req.params; // 拼接文件路径 const filePath = path.resolve(TEMP_DIR, filename); // 创建可读流 const ws = fs.createWriteStream(filePath); // 将可读流中的数据写入到可写流中，完成文件上传 await pipeStream(req, ws); res.json({ success: true }); }); ``` 注意这里以流的形式接收文件，而不是借助 `multer` 处理 `FormData`数据。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f34433f19d8e46e29c0899f41bbcfc5a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2274&h=2050&s=452344&e=png&b=1d1d1d) 为了热更新，代码改完及时生效，安装下 `npm i nodemon`, 然后在`package.json`添加一条`script` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74066965951649179fa929369bf146a3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1532&h=994&s=164740&e=png&b=1c1c1c) 然后执行 `npm run start`重启下，后面修改了就会自动重启了。下面用 postman 来测试下: ![testupload.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c259ebaa668d46eabfe0d86792e33108~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=2374824&e=gif&f=154&b=1d1d1d) 用 post 请求，body 里面选择二进制文件，测试没问题，后端接口就完成了。 ## 前端部分先看看最终效果： ![8.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef1eb9c64cfb4689a8c4c5616a1e4163~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=2828115&e=gif&f=157&b=1d1d1d) ### 准备工作用`vite`初始化项目，选择 `vue`, 用 `javascript` 就好, 项目名为 client-by-vue ```sh # 创建和启动项目 npm create vite@latest cd client-by-vue npm i npm run dev ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fa6dd8a0a6f481ca0c45f85d4edf0d6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1434&h=450&s=51547&e=png&b=010101) 先把无关的文件删除掉，保持简单。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dddad09671f49519799cc6aeb55077f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2628&h=1074&s=168467&e=png&b=1e1e1e) 打开网址看看，没问题。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3469367685045bca38a3d79dc54078a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1010&h=552&s=25687&e=png&b=fefefe) 把后面会用到依赖安装了，分别是`element-plus`和 `axios`， `element-plus`安装按照官网指南全量安装，包括图标: ```sh npm i element-plus @element-plus/icons-vue axios ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9101b98d30d24da1932329679a7a89ac~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1846&h=880&s=200968&e=png&b=1d1d1d) 试一下组件库引入: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/253caac6d6314a53a44730c7dedad375~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2586&h=868&s=218025&e=png&b=1f1f1f) 好了，以上就是前端需要准备的部分，下面开始开发文件上传功能 ### 样式先把样式写出来：画一个文件选择框和一个按钮，鼠标悬浮和边框变色 ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba955488dc4e4a428ad28e69243668f1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3236&h=954&s=81853&e=png&b=ffffff) ### 实现拖拽选择文件功能拖拽获取到文件，需要用到`drop`事件，在 `event.dataTransfer`读取到，同时要阻止浏览器默认事件; `isDragover`用于控制拖拽的高亮(注意看上面的css样式)： ```html

``` ```js const { isDragover } = toRefs( reactive({ isDragover: false, }) ); const handleDrop = (e) => { e.preventDefault(); const { files } = e.dataTransfer; console.log("files: ", files); }; ``` 效果是这样的： ![02.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/811fb1b7507c43a6a3832cc5a3ffa2aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=405021&e=gif&f=49&b=292929) 这样就拿到了拖拽的`File`文件对象了，可以用来上传。 ### 实现点击选择文件功能除了拖拽获取到文件，还有点击选择文件交互，也来实现一下：利用`input:type=file`的点击事件，可以打开选择文件的弹框。 ```html

``` ```js const handleClick = () => { const input = document.createElement("input"); input.type = "file"; input.addEventListener("change", (e) => { const { files } = e.target; console.log("files: ", files); }); input.click(); }; ``` 效果同样可以拿到文件对象 ![3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1aecc9558d3442baea6fdf29e56aba9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=505845&e=gif&f=50&b=292929) ### 文件展示例子以视频和图片讲解，来展示一下拿到视频文件和图片文件吧。思路上就是用一个响应式对象，选完文件，就存一下 url(`URL.createObjectURL(file)`)和原文件对象，template 中根据类型用`img`或`video`进行展示 ```js // 新增一个 selectedFile 用来存放文件信息 const { isDragover, selectedFile } = toRefs( reactive({ isDragover: false, selectedFile: { url: "", file: null }, }) ); const handleDrop = (e) => { e.preventDefault(); const { files } = e.dataTransfer; if (files.length === 0) return; // 限制只能上传图片或视频 const isMedia = files[0].type.indexOf("image") > -1 || files[0].type.indexOf("video") > -1; if (!isMedia) { return ElMessage.warning("只能上传图片或视频"); } // 拿到文件之后，存放到 selectedFile 中， url 为文件的本地路径，file 为文件对象 selectedFile.value = { url: URL.createObjectURL(files[0]), file: files[0], }; }; const handleClick = () => { const input = document.createElement("input"); input.type = "file"; input.addEventListener("change", (e) => { const { files } = e.target; if (files.length === 0) return; // 限制只能上传图片或视频 const isMedia = files[0].type.indexOf("image") > -1 || files[0].type.indexOf("video") > -1; if (!isMedia) { return ElMessage.warning("只能上传图片或视频"); } // 拿到文件之后，存放到 selectedFile 中， url 为文件的本地路径，file 为文件对象 selectedFile.value = { url: URL.createObjectURL(files[0]), file: files[0], }; }); input.click(); }; ``` ```html

``` 效果是这样的： ![4.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/669af2f1753b400fb58c0cc41bed8a82~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=1123565&e=gif&f=87&b=292929) ### 文件上传好了，选择文件功能搞定，接下来简单封装一下`axios`, 用来发送上传文件请求。 src 目录下面新建一个 axiosInstance.js 文件，内容如下： ```js // axios 设置baseURL 响应拦截器 import axios from "axios"; const axiosInstance = axios.create({ baseURL: "http://localhost:8080", }); axiosInstance.interceptors.response.use( (response) => { if (response.data && response.data.success) { return response.data; } }, (error) => { console.log("error: ", error); return Promise.reject(error); } ); export default axiosInstance; ``` 在 App.js 文件中引入 axiosInstance.js 来发送请求： ```js import axiosInstance from "./axiosInstance"; ... const handleUpload = () => { if (!selectedFile.value.file) { return ElMessage.warning("请先选择文件"); } const file = selectedFile.value.file; axiosInstance .post(`/upload/${file.name}`, file, { headers: { "Content-Type": "application/octet-stream", }, }) .then((res) => { ElMessage.success("上传成功"); }) .catch((err) => { ElMessage.error("上传失败"); }); } ``` ```html 开始上传 ``` 开始发送请求，**注意**请求头设置 `application/octet-stream`！看看上传效果： ![5.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2af24bbb3b17451bae85e8157018c5a6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=3684843&e=gif&f=179&b=1d1d1d) ### 上传进度展示上面演示的都是小文件，本地上传速度很快，接下来试一下大一点的文件，我找了一个1.5G的视频： ![6.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0742172a902a43b28ccfaa19823a83d2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=1306107&e=gif&f=127&b=383838) 在本地没有网络延迟的情况下，虽然上传成功了，但是有明显的等待感，网络请求一直 pending, 体验不是很好，下面加个显示上传进度来优化一下： ```js // 添加一个对象，用来保存进度信息 const { ... progressInfo } = toRefs( reactive({ ... progressInfo: { name: "", percent: 0, }, }) ); const handleUpload = () => { ... const file = selectedFile.value.file; axiosInstance .post(`/upload/${file.name}`, file, { headers: { "Content-Type": "application/octet-stream", }, // 这里更新进度信息 onUploadProgress(progressEvent) { progressInfo.value = { name: file.name, percent: Math.round( (progressEvent.loaded * 100) / progressEvent.total ), }; }, }) ... }; ``` ```html

``` 通过`axios` 发送请求配置项的 `onUploadProgress`回调可以实时更新上传的进度。最终就达到了上面展示的效果： ![7.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ce1e709951d4c30a052fb0037f54fe5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=646&s=715028&e=gif&f=92&b=383838) ## 总结本文带大家起项目，先开发后端上传接口，然后大篇幅演示实现拖拽选择文件、点击选择文件、上传文件以及上传进度展示等前端交互。代码可以跟着上面的讲解敲一遍加深印象，同时我放到[gitee](https://gitee.com/GumplinGo/1_simple_upload.git)上面，有需要自取。如果有帮助也望能顺手点个赞和收藏，这是我继续更文的重要动力来源哦~ [大文件上传实现专栏](https://juejin.cn/column/7322305256171700264) 的下一篇文章主题是“分片上传”，将在本文实现基础上进行改造升级，点击[这里](https://juejin.cn/post/7327099448332271651)继续阅读吧。