Vue + Node.js 搭建「文件上传」管理后台

最新推荐文章于 2024-09-08 17:17:41 发布

Web_boom

最新推荐文章于 2024-09-08 17:17:41 发布

阅读量1k

点赞数

文章标签： vue.js node.js 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/125332261

版权

本教程详细讲解如何使用 Vue + Node.js 构建一个文件上传管理后台。前端采用 Vue、Axios 和 Multipart，后端使用 Node.js、Express 和 Multer。教程涵盖了前端文件上传组件的创建、后端文件处理、限制文件大小、进度条显示、错误处理以及前后端联调。最终实现的功能包括文件上传、文件列表展示和文件下载。

摘要由CSDN通过智能技术生成

本教程手把手带领大家搭建一套通过 Vue + Node.js 上传文件的后台系统，只要你跟随本教程一步步走，一定能很好的理解整个前后端上传文件的代码逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer 来搭建后端上传文件处理应用。

当然，本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。

最后完成的上传文件工具后台如下图，跟随本教学习，你也可以搭出来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hLSxJQU-1655445269086)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/239ebb597f4c42eb8b9ed9b1ad68af62~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

如果你对前端不是很熟悉，不想写前端，推荐使用卡拉云搭建后台管理系统，卡拉云是新一代低代码开发工具，不用懂任何前端技术，仅靠鼠标拖拽，即可快速搭建包括「上传文件」在内的任何后台管理工具。立即试用卡拉云 1 分钟搭建「文件上传」工具。详情见本文文末。

Vue + Node.js「上传文件」前后端项目结构

kalacloud-upload-file-vue-nodejs

Vue 前端部分

UploadFilesService.js：这个脚本调用通过 Axios 保存文件和获取文件的方法
UploadFiles.vue：这个组件包含所有上传文件相关的信息和操作
App.vue：把我们的组件导入到 Vue 起始页
index.html：用于导入 Bootstrap
http-common.js：配置并初始化 Axios
vue.config.js：配置 APP 端口

Node.js 后端部分

resources/static/assets/uploads：用于存储上传的文件
middleware/upload.js：初始化 Multer 引擎并定义中间件
file.controller.js：配置 Rest API
routes/index.js：路由，定义前端请求后端如何执行
server.js：运行Node.js Express 应用

✦ 前端部分 - 上传文件 Vue + Axios + Multipart

配置 Vue 环境

使用 npm 安装 Vue 脚手架 vue-cli

npm install -g @vue/cli

vue-setup

然后我们创建一个 Vue 项目 kalacloud-vue-multiple-files-upload

vue create kalacloud-vue-multiple-files-upload

安装完成后，cd 进入 kalacloud-vue-multiple-files-upload 目录，接下来所有操作都在这个目录之下。

安装 Axios：

npm install axios

我们先跑一下 Vue ，这是 vue 的默认状态

npm run serve

vue-run

我们可以看到浏览器里 Vue 已经在 localhost:8080 跑起来了。

扩展阅读：《Vue 搭建带预览的「上传图片」管理后台》

导入 Bootstrap 到项目中

打开 index.html 把以下代码添加到<head> 中：

文件位置：public/index.html

<!DOCTYPE html>
<html lang="en"><head>
...
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
  ...
</html>

初始化 Axios HTTP 客户端

在 src 文件夹下，创建 http-common.js 文件，如下所示：

文件位置：src/http-common.js

import axios from "axios";
export default axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

这里的 baseURL 是你上传文件的后端服务器 REST API 地址，请根据实际情况修改。本教程后文，教你搭建上传文件的后端部分，请继续阅读。

创建「上传文件」功能

我们来写一个 JS 脚本，这个脚本调用 Axios 发送 HTTP API 请求，与后端服务器通讯。

这个脚本包含 2 个功能

upload(file): POST 数据到后端，再加一个上传进度的回调，可以放个上传进度条。
getFiles(): 用于获取服务器上传文件夹中的文件列表

文件位置：src/services/UploadFilesService.js

import http from "../http-common";
class UploadFilesService {
  upload(file, onUploadProgress) {
    let formData = new FormData();
    formData.append("file", file);
    return http.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      },
      onUploadProgress});
  }
  getFiles() {
    return http.get("/files");
  }
}
export default new UploadFilesService();