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 相关文章推荐
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
js查找节点的方法小结
Jan 13 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue中实现高德定位功能
Dec 03 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
关于ES6尾调用优化的使用
Sep 11 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执行普通shell命令流程解析
2020/08/24 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Django实现表单验证
2018/09/08 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
大学自我鉴定
2013/12/20 职场文书
责任书格式
2015/01/29 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
同乡会致辞
2015/07/30 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
远程教育学习心得体会
2016/01/23 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
php实例化对象的实例方法
2021/11/17 PHP