nodejs+koa+vue实现上传文件（图片）到服务器以及删除图片_nodejs文章/教程_编程语言

nodejs+koa+vue实现上传文件（图片）到服务器以及删除图片

2023-02-09 学习力0

核心提示：前言：这两天把小程序的页面和小程序支付给解决掉了，当然啦微信支付也是前后端一块写的，以及支付成功回调函数等，当然了这篇记录的不是微信支付，微信支付我会在一个完整的时间整理出来。这篇主要就是给大家讲一下文件上传删除，这一片呢就以图片上传删除为

前言：

这两天把小程序的页面和小程序支付给解决掉了，当然啦微信支付也是前后端一块写的，以及支付成功回调函数等，当然了这篇记录的不是微信支付，微信支付我会在一个完整的时间整理出来。这篇主要就是给大家讲一下文件上传删除，这一片呢就以图片上传删除为例。

好多人有一个误区，特别是在网上搜了一大堆方法之后更是一头雾水，今天就给大家介绍一下我使用的最简单的方法。

技术点：

vue+elementUi 使用el-upload上传图片
nodejs + koa. 使用fs+koa-multer实现将图片保存在服务器以及删除图片

一.vue+element使用el-upload上传图片

老样子，话不多说先上图：

nodejs+koa+vue实现上传文件（图片）到服务器以及删除图片

在上代码：

 1 <el-upload
 2           action="/upload/friedChickensImg"
 3           list-type="picture-card"
 4           :limit="1"
 5           :on-preview="preview"
 6           :on-success="afterSuccessUpload"
 7           :before-remove="handleRemove"
 8         >
 9           <i class="el-icon-plus"></i>
10         </el-upload>
11         <el-dialog :visible.sync="dialogVisible">
12           <img width="100%" :src="dialogImageUrl" alt />
13         </el-dialog>

这里主要有几个方法就是删除呀预览呀等等大家去官网一看便知！

其实前端处理很简单只需要这几行代码就ok，我们具体来看后端代码！

二.nodejs + koa. 使用fs+koa-multer实现将图片保存在服务器以及删除图片

上传成功：

nodejs+koa+vue实现上传文件（图片）到服务器以及删除图片

删除成功：

nodejs+koa+vue实现上传文件（图片）到服务器以及删除图片

先看图片我们跟能直观的感受到，接下来

上代码：

首先呢就是下载koa-multer,大家自行百度 npm i koa-multer --saver , 接着配置参数

 1 const multer = require('koa-multer');//加载koa-multer模块
 2 
 3 //文件上传
 4 var storage = multer.diskStorage({
 5   //文件保存路径
 6   destination: function (req, file, cb) {
 7     cb(null, 'C:/friedChickens/friedChickensImg')
 8   },
 9   //修改文件名称
10   filename: function (req, file, cb) {
11     var fileFormat = (file.originalname).split(".");
12     cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
13   }
14 })
15 //加载配置
16 var upload = multer({ storage: storage });

直接复制代码大家不要问那么多，不懂得可以留言，傻瓜式操作！

然后就是给前端提供一个接口简简单单三行代码：

 1 const multer = require('koa-multer');//加载koa-multer模块
 2 
 3 //文件上传
 4 var storage = multer.diskStorage({
 5   //文件保存路径
 6   destination: function (req, file, cb) {
 7     cb(null, '/friedChickensImg')
 8   },
 9   //修改文件名称
10   filename: function (req, file, cb) {
11     var fileFormat = (file.originalname).split(".");
12     cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
13   }
14 })
15 //加载配置
16 var upload = multer({ storage: storage });
17 /* 上传图片 */
18 router.post('/friedChickensImg', upload.single('file'), async (ctx, next) => {
19   ctx.body = {
20     filename: ctx.req.file.filename,//返回文件名
21     path:'/friedChickensImg'
22   }
23 })

这里大家需要注意一点的就是，图片保存的路径可以任意写！

到此呢，你调用此接口就可以看到你的服务器成功的上传了一张照片，????????????

然后就是

删除图片：

删除图片就直接给大家贴出来完整的代码，不做过多的赘述！

 1     deleteFolderRecursive(url, name) {
 2         var files = [];
 3 
 4         if (fs.existsSync(url)) {    //判断给定的路径是否存在
 5 
 6             files = fs.readdirSync(url);    //返回文件和子目录的数组
 7 
 8             files.forEach(function (file, index) {
 9 
10                 var curPath = path.join(url, file);
11 
12                 if (fs.statSync(curPath).isDirectory()) { //同步读取文件夹文件，如果是文件夹，则函数回调
13                     deleteFile(curPath, name);
14                 } else {
15 
16                     if (file.indexOf(name) > -1) {    //是指定文件，则删除
17                         fs.unlinkSync(curPath);
18                         console.log("删除文件：" + curPath);
19                     }
20                 }
21             });
22         } else {
23             console.log("给定的路径不存在！");
24         }
25     }

两个参数，第一个是存放文件的路径，第二个参数就是文件名称！

代码里有少量的注释大家自行观看！

至此呢删除文件就大功告成。????????????

结束语：

我的随笔呢大都以代码为主，并且是测试可以正常使用，大家只要拿到项目里就可以直接使用，是不是很傻瓜？如果大家有不懂的可以留言或者是加我wx：18237266724，就到这里吧洗洗睡觉！！！

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.