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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
sails框架的学习指南
Dec 22 Javascript
微信jssdk用法汇总
Jul 16 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
ECMAscript 变量作用域总结概括
Aug 18 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JavaScript中的函数式编程详解
Aug 22 Javascript
js实现圆形菜单选择器
Dec 03 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往XML中添加节点的方法
2015/03/12 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Python有序查找算法之二分法实例分析
2017/12/11 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
2014端午节活动策划方案
2014/01/27 职场文书
初级会计求职信范文
2014/02/15 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫