Express系列之multer上传的使用


Posted in Javascript onOctober 27, 2017

这两天在看《nodejs权威指南》,这本书看了好久了,但是读的一直不细,这次才好好看了一遍。

收获还是蛮多的,主要在于wenpack使用的一些细节问题,有点茅塞顿悟的体验吧,另外在node上也不再一脸懵逼了。不过说实话,以现在的水平向直接使用node做点什么还是挺难的,今天测试了下链接mongodb和mysql数据库,虽然能使用,但还是怪怪的。所以就想先使用现有的框架,再反推学习node。

框架的话就选了这个express.

主要就是测试了几个书里提到的中间件,书写的有些早,很多api都过时了,照着官网一点一点找更新的地方看。

目前觉得对我有用的是:multer和static。

后者可以在本地调试页面,对于手机页面尤其有用。

这次主要说一下multer,我并没有实现所有的功能,只是实现单图片上传这一个功能,其他的再摸索喽。

Express系列之multer上传的使用

这是文件的整个目录,主要就两个,一个是根目录下的main.js,还有一个是public/index.html。

放代码:

//main.js
let express = require('express');

var multer = require('multer')

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
 })
 
var upload = multer({ storage: storage })

//var upload = multer({ dest: 'public/' })
 

let app = express()

app.use(express.static('public'))

app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})

app.listen(3300,'127.0.0.1')
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file" accept="image/*">
  <div id="result"></div>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById('file');
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append('myfile', file)
      xhr.open('post', '/public/index.html')
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById('result').innerHTML = this.response
          document.getElementById('img').src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>

</html>

不想引用jquery库,我就原生写的ajax,总的来说应该没什么难的,总之就是点击按钮选择完图片之后,会将图片的信息放在一个键名为myfile的对象中,传给后台。

express把接受到的图片存储在/public/文件下,这里有个小小的坑。可以看到我在main.js注释了这样一行代码:

var upload = multer({ dest: 'public/' })

其实最开始的时候我用的就是这一行代码,dest的意思是选择一个路径去存储文件,但是这样写有一个小小的问题,存入进来的文件是没有后缀名的。

我在向前台返回数据的时候

res.send(req.file)

这个问题就很严重,比如一个场景是我上传一张图片做头像,但是等我下次进入自己的个人页面,后台给我返回的数据没有办法作为图片的地址使用,这就很麻烦了。所以在网上找了一个原因,就把上面的代码注释换成了这个:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
})

var upload = multer({ storage: storage })

destination是文件存储的地址,filename设置的是文件的名字,那在这里如果写成这种:

filename: function (req, file, cb) {
 cb(null, file.fieldname + '.png');
}

你会发现你传入的每一张图片的名字都是myfile.png,新的覆盖旧的。所以为了能保存传入的所有图片,我就使用Date.now()作为每张图片不同的识别符,这样就不会再出现覆盖的情况。

目前就这样,下次弄出来了多图片上传我再接着更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
Vuex新手的理解与使用详解
May 31 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
微信小程序返回多级页面的实现方法
Oct 27 #Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 #Javascript
基于JavaScript实现报警器提示音效果
Oct 27 #Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 #Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 #Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 #Javascript
You might like
PHP 翻页 实例代码
2009/08/07 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php curl_init函数用法
2014/01/31 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
重定向实现代码
2006/11/20 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python subprocess模块详细解读
2018/01/29 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python 经典数字滤波实例
2019/12/16 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
学生党支部先进事迹
2014/02/04 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
运动会主持词大全
2015/07/02 职场文书
节水宣传标语口号
2015/12/26 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python