当前位置: 首页>后端>正文

nodejs express muter 上传多个图片 node上传图片到服务器

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

前言:

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

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

技术点:

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

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

老样子,话不多说先上图:

 

 

在上代码:

 

 

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 express muter 上传多个图片 node上传图片到服务器,nodejs express muter 上传多个图片 node上传图片到服务器_服务器,第1张

 

nodejs express muter 上传多个图片 node上传图片到服务器,nodejs express muter 上传多个图片 node上传图片到服务器_服务器_02,第2张

 

 

删除成功:

nodejs express muter 上传多个图片 node上传图片到服务器,nodejs express muter 上传多个图片 node上传图片到服务器_服务器_03,第3张

 

 

nodejs express muter 上传多个图片 node上传图片到服务器,nodejs express muter 上传多个图片 node上传图片到服务器_加载_04,第4张

 

 

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

上代码:

首先呢就是下载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 })

 

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

 

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


https://www.xamrdz.com/backend/3wh1937466.html

相关文章: