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 动态设置已知select的option的value值的代码
Dec 16 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php fckeditor 调用的函数
2009/06/21 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
使javascript也能包含文件
2006/10/26 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python程序中设置HTTP代理
2016/11/06 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
iPython pylab模式启动方式
2020/04/24 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
三八红旗手先进事迹材料
2014/05/13 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
护士辞职信怎么写
2015/02/27 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js