【VUE案例练习】一文把握vue2+express实现文件上传

金歌  金牌会员 | 昨天 02:42 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 955|帖子 955|积分 2865

前言

   近期在做跟毕业筹划相关的数据后台管理系统，此中的列表项展示有图片，添加/编辑功能有文件上传。
  “文件上传/删除”也是我们开发中的常见功能，分享个人的实现过程，与各人分享交流
  一、预备工作

   

  • 本次案例使用的node版本是18.16.1
  • 前端vue2+element-ui
  • 后端使用node+express
  • 安装对应库：element-ui、axios、multer
  留意：本篇重点介绍文件上传的相关功能，后端express的详细使用可以看我的express专栏~
express专栏
二、前端

文件上传组件，来自element-ui组件库
留意：自行安装组件库
Element - The world's most popular Vue UI framework

   关于组件，有些展示和功能需要对应设置（比如文件上传的服务器地址，删除后端文件等等）才可以正常使用，以是我对代码进行了修改补充。
  1、组件代码

  1. <template>
  2.   <div>
  3.     <el-upload
  4.       ref="upload"
  5.       action="http://localhost:4000/api/upload"  //文件上传的接口
  6.       list-type="picture-card"
  7.       :on-preview="handlePictureCardPreview"
  8.       :on-remove="handleRemove"
  9.       :file-list="fileList"
  10.       :on-change="handleFileChange"
  11.       :on-success="handleUploadSuccess"
  12.       :on-error="handleUploadError"
  13.       name="file"
  14.     >
  15.       <i class="el-icon-plus" />
  16.     </el-upload>
  17.     <el-dialog :visible.sync="dialogVisible">
  18.       <img width="100%" :src="dialogImageUrl" alt="">
  19.     </el-dialog>
  20.   </div>
  21. </template>
复制代码
2、变量和相关函数

留意：需要安装axios（若安装则跳过）
  1. npm install axios
复制代码
  1. <script>
  2. import Axios from 'axios'
  3. export default {
  4.   data() {
  5.     return {
  6.       dialogImageUrl: '', //预览时展示的图片
  7.       dialogVisible: false,
  8.       fileList: [] // 用于存储文件列表
  9.     }
  10.   },
  11.   methods: {
  12.     // 生成文件预览 URL
  13.     handleFileChange(file, fileList) {
  14.       file.url = URL.createObjectURL(file.raw)
  15.       this.fileList = fileList
  16.     },
  17.     // 删除文件
  18.     handleRemove(file, fileList) {
  19.       this.fileList = fileList
  20.       // 调用后端删除接口
  21.       if (file.response && file.response.data) {
  22.         this.deleteFile(file.response.data)
  23.       } else {
  24.         this.$message.warning('文件尚未上传成功，无法删除')
  25.       }
  26.     },
  27.     // 预览图片
  28.     handlePictureCardPreview(file) {
  29.       this.dialogImageUrl = file.url
  30.       this.dialogVisible = true
  31.     },
  32.     // 文件上传成功
  33.     handleUploadSuccess(response, file) {
  34.       console.log('文件上传成功', response)
  35.       if (response.code === 0) {
  36.         // 从后端响应中获取图片的 URL
  37.         const imageUrl = response.data
  38.         // 更新 fileList 中的文件 URL
  39.         const index = this.fileList.findIndex(f => f.uid === file.uid)
  40.         if (index !== -1) {
  41.           this.fileList[index].url = imageUrl
  42.           this.fileList[index].response = response // 保存后端返回的响应
  43.         }
  44.         this.$message.success('文件上传成功')
  45.       } else {
  46.         this.$message.error('文件上传失败: ' + response.msg)
  47.       }
  48.     },
  49.     // 文件上传失败
  50.     handleUploadError(err, file) {
  51.       console.error('文件上传失败', err)
  52.       this.$message.error('文件上传失败')
  53.     },
  54.     deleteFile(filename) {
  55.       // 去掉前缀 /public/static/upload/
  56.       const pureFilename = filename.replace('/public/static/upload/', '')
  57.       // 调用后端删除接口
  58.       Axios.delete(`http://localhost:4000/api/upload/${pureFilename}`)
  59.         .then(response => {
  60.           if (response.data.code === 0) {
  61.             this.$message.success('文件删除成功')
  62.           } else {
  63.             this.$message.error('文件删除失败: ' + response.data.msg)
  64.           }
  65.         })
  66.         .catch(err => {
  67.           console.error('文件删除失败', err)
  68.           this.$message.error('文件删除失败')
  69.         })
  70.     }
  71.   }
  72. }
  73. </script>
复制代码
3、完整代码

 留意看：''localhost:4000''相关字眼（关于后端接口的，下文会作介绍）
  1. <template>
  2.   <div>
  3.     <el-upload
  4.       ref="upload"
  5.       action="http://localhost:4000/api/upload"
  6.       list-type="picture-card"
  7.       :on-preview="handlePictureCardPreview"
  8.       :on-remove="handleRemove"
  9.       :file-list="fileList"
  10.       :on-change="handleFileChange"
  11.       :on-success="handleUploadSuccess"
  12.       :on-error="handleUploadError"
  13.       name="file"
  14.     >
  15.       <i class="el-icon-plus" />
  16.     </el-upload>
  17.     <el-dialog :visible.sync="dialogVisible">
  18.       <img width="100%" :src="dialogImageUrl" alt="">
  19.     </el-dialog>
  20.   </div>
  21. </template>
  23. <script>
  24. import Axios from 'axios'
  25. export default {
  26.   data() {
  27.     return {
  28.       dialogImageUrl: '',
  29.       dialogVisible: false,
  30.       fileList: [] // 用于存储文件列表
  31.     }
  32.   },
  33.   methods: {
  34.     // 生成文件预览 URL
  35.     handleFileChange(file, fileList) {
  36.       file.url = URL.createObjectURL(file.raw)
  37.       this.fileList = fileList
  38.     },
  39.     // 删除文件
  40.     handleRemove(file, fileList) {
  41.       this.fileList = fileList
  42.       // 调用后端删除接口
  43.       if (file.response && file.response.data) {
  44.         this.deleteFile(file.response.data)
  45.       } else {
  46.         this.$message.warning('文件尚未上传成功，无法删除')
  47.       }
  48.     },
  49.     // 预览图片
  50.     handlePictureCardPreview(file) {
  51.       this.dialogImageUrl = file.url
  52.       this.dialogVisible = true
  53.     },
  54.     // 文件上传成功
  55.     handleUploadSuccess(response, file) {
  56.       console.log('文件上传成功', response)
  57.       if (response.code === 0) {
  58.         // 从后端响应中获取图片的 URL
  59.         const imageUrl = response.data
  60.         // 更新 fileList 中的文件 URL
  61.         const index = this.fileList.findIndex(f => f.uid === file.uid)
  62.         if (index !== -1) {
  63.           this.fileList[index].url = imageUrl
  64.           this.fileList[index].response = response // 保存后端返回的响应
  65.         }
  66.         this.$message.success('文件上传成功')
  67.       } else {
  68.         this.$message.error('文件上传失败: ' + response.msg)
  69.       }
  70.     },
  71.     // 文件上传失败
  72.     handleUploadError(err, file) {
  73.       console.error('文件上传失败', err)
  74.       this.$message.error('文件上传失败')
  75.     },
  76.     // 删除后端文件，参数传递的是文件名（经前端上传过后，返回给前端的文件名）
  77.     deleteFile(filename) {
  78.       // 去掉前缀 /public/static/upload/
  79.       const pureFilename = filename.replace('/public/static/upload/', '')
  80.       // 调用后端删除接口
  81.       Axios.delete(`http://localhost:4000/api/upload/${pureFilename}`)
  82.         .then(response => {
  83.           if (response.data.code === 0) {
  84.             this.$message.success('文件删除成功')
  85.           } else {
  86.             this.$message.error('文件删除失败: ' + response.data.msg)
  87.           }
  88.         })
  89.         .catch(err => {
  90.           console.error('文件删除失败', err)
  91.           this.$message.error('文件删除失败')
  92.         })
  93.     }
  94.   }
  95. }
  96. </script>
  98. <style>
  99. .el-upload-list__item-thumbnail {
  100.   width: 100%;
  101.   height: 100%;
  102.   object-fit: cover;
  103. }
  104. </style>
复制代码
三、后端

1、搭建express应用

【express-generator】01-安装和基本使用
如果按照文章步骤（默认端口是3000，我这里设置成4000端口），则对应更换端口为4000，在创建的express项目标bin/www中进行修改。

2、新建文件夹及文件

2.1、新建public/static/upload

这是存储上传文件的位置。

 2.2、新建routes/upload.js，撰写路由方法。

安装multer，这是处理文件上传的相关库。
   npm install multer
  

  1. var express = require("express");
  2. const multer = require("multer");
  3. const { uploading } = require("../utils/tool");
  4. const fs = require('fs');
  5. const path = require('path');
  6. var router = express.Router();
  8. // 文件上传接口
  9. router.post("/", async function (req, res, next) {
  10.     // single 方法里面书写上传控件的 name 值
  11.     uploading.single("file")(req, res, function (err) {
  12.         if (err instanceof multer.MulterError) {
  13.             next("上传文件失败，请检查文件的大小，控制在 6MB 以内");
  14.         } else {
  15.             console.log("req.file>>>", req.file);
  16.             
  17.             const filePath = "/public/static/upload/" + req.file.filename;
  18.             res.send({ code: 0, msg: "文件上传成功", data: filePath });
  19.         }
  20.     })
  21. });
  23. // 文件删除接口
  24. router.delete("/:filename", function (req, res, next) {
  25.     const filename = req.params.filename;
  26.     const filePath = path.join(__dirname, '../public/static/upload',filename);
  27.     console.log("后端接收到的文件参数>>>",filename,"完整基本路径是>>>>",filePath);
  28.     fs.unlink(filePath, (err) => {
  29.         if (err) {
  30.             console.error("删除文件失败", err);
  31.             return res.status(500).send({ code: 1, msg: "删除文件失败" });
  32.         }
  33.         res.send({ code: 0, msg: "文件删除成功" });
  34.     });
  35. });
  37. module.exports = router;
复制代码
2.3、新增utlis/tool.js，撰写工具类函数。


  1. const multer = require("multer");
  2. const path = require("path");
  5. // 设置上传文件的引擎
  6. const storage = multer.diskStorage({
  7.     // 文件存储的位置
  8.     destination: function (req, file, cb) {
  9.         cb(null, __dirname + '/../public/static/upload');
  10.     },
  11.     // 上传到服务器的文件，文件名要做单独处理
  12.     filename: function (req, file, cb) {
  13.         // 获取文件名
  14.         const basename = path.basename(file.originalname, path.extname(file.originalname));
  15.         // 获取后缀名
  16.         const extname = path.extname(file.originalname);
  17.         // 构建新的名字
  18.         const newName = basename + new Date().getTime() + Math.floor(Math.random() * 9000 + 1000) + extname;
  19.         cb(null, newName);
  20.     }
  21. })
  23. module.exports.uploading = multer({
  24.     storage: storage,
  25.     limits: {
  26.         fileSize: 6000000,
  27.         files: 1
  28.     }
  29. })
复制代码
 3、在app.js中引入和使用

  1. var createError = require('http-errors');
  2. var express = require('express');
  3. var path = require('path');
  4. var cookieParser = require('cookie-parser');
  5. var logger = require('morgan');
  6. const cors = require('cors');
  7. // 文件上传
  8. const multer = require('multer');
  9. const fs = require('fs');
  10. // const path = require('path');
  13. var indexRouter = require('./routes/index');
  14. var usersRouter = require('./routes/users');
  15. var uploadRouter = require('./routes/upload');
  16. var app = express();
  18. // view engine setup
  19. app.set('views', path.join(__dirname, 'views'));
  20. app.set('view engine', 'jade');
  22. // 允许所有来源访问
  23. app.use(cors());
  25. // 文件上传
  26. // const upload = multer({ dest: 'static/upload/' });
  27. app.use(express.static(path.join(__dirname, 'public')));
  28. app.use(logger('dev'));
  29. app.use(express.json());
  30. app.use(express.urlencoded({ extended: false }));
  31. app.use(cookieParser());
  32. app.use(express.static(path.join(__dirname, 'public')));
  33. app.use('/', indexRouter);
  34. app.use('/users', usersRouter);
  35. app.use('/api/upload/', uploadRouter);
  39. // error handler
  40. app.use(function(err, req, res, next) {
  41.   // set locals, only providing error in development
  42.   res.locals.message = err.message;
  43.   res.locals.error = req.app.get('env') === 'development' ? err : {};
  45.   // render the error page
  46.   res.status(err.status || 500);
  48.   
  49.   res.render('error');
  50. });
  52. module.exports = app;
复制代码
四、测试

1、上传文件（图片）


 查看存储上传文件的位置

 2、删除文件（图片）

前端组件，鼠标进入到图片区域，点击删除按键

前端作出对应提示

末了前端的文件列表也为空，成功删除了文件。

后端查看文件夹，发现刚上传的文件由于前端的删除操作，也对应进行了删除。
 

 五、总结

一些留意点
   express应用默认端口号是3000，而案例演示的是4000（因为一般环境，3000端口容易被其他代码程序给使用用，制止这种环境，可以使用一个新的端口号（或者把占用3000端口的程序都关闭））
    关于文件上传的设置，涉及到的知识点比力多，比如fs.unlink，path相关的知识，需要各人自行进行补充了解，部门知识点可以参考下方这篇博客文章。
  【NODE】01-fs和path常用知识点
  
如果有问题，请留言评论~
如果你喜欢这篇文章，留下你的点赞和收藏~ 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表