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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
js获取ip和地区
Mar 10 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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通用分页类page.php[仿google分页]
2008/08/31 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
django 环境变量配置过程详解
2019/08/06 Python
Python流程控制 if else实现解析
2019/09/02 Python
python中@contextmanager实例用法
2021/02/07 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
策划助理岗位职责
2013/11/18 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android