使用express+multer实现node中的图片上传功能


Posted in Javascript onFebruary 02, 2018

下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示:

在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中

在node中使用multer中间件来对上传路由接口进行处理

multer文档

package.json

使用express+multer实现node中的图片上传功能

html部分

<body>
<div class="form-group">
    <label>File input:</label>
    <input type="file" name="file" id="file">
    <p id="result"></p>
    <img id="img" src="">
  </div>
  <button id="upload" class="btn btn-default">提交</button>
  </body>

js部分

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //上传图片的业务逻辑函数
    function uploadFile(){
      //上传图片的input
      var file = document.getElementById("file")
      //因为准备用post提交,又因为图片的内容比较大,所以我们选择使用formdata来承载数据
      //创建formdata对象
      var formData = new FormData();
      //给formdata对象中放入数据(键值对的方式)
      formData.append('file',file.files[0]);
      //提交请求
      $.ajax({
        url: '/upload',//请求路径
        type: 'POST',
        data: formData,
        contentType: false,//为了让浏览器根据传入的formdata来判断contentType
        processData: false,//同上
        success: function(data){
          if(200 === data.code) {
            $('#result').html("上传成功!");
            $('#img').attr('src',data.data);
          } else {
            $('#result').html("上传失败!");
          }
          console.log(2)
        },
        error: function(){
          $("#result").html("与服务器通信发生错误");
        }
      });
      console.log(1)
    }
    //给按钮添加点击事件
    function postPage() {
        //上传按钮
        var uploada = document.getElementById('upload');
        uploada.addEventListener("click",function () {
          uploadFile();
        },false);
    }
    window.onload = function () {
      postPage();
    }
</script>

NodeJS逻辑代码

const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档:https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(__dirname, 'public')));
app.get('/',(req,res)=>{
  res.sendFile(__dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    cb(null, './public/uploadImgs')
  },
![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)
  //确定图片存储时的名字,注意,如果使用原名,可能会造成再次上传同一张图片的时候的冲突
  filename: function (req, file, cb){
    cb(null, Date.now()+file.originalname)
  }
});
//生成的专门处理上传的一个工具,可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
  //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了(加上了file等信息)
  //线上的也就是服务器中的图片的绝对地址
  var url = '/uploadImgs/' + req.file.filename
  res.json({
    code : 200,
    data : url
  })
});
http.createServer(app).listen(3000,()=>{
  console.log('server is listening')
})

自我感觉良好,不知道博客园为什么要给我移除首页....

再发一次,if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}

总结

以上所述是小编给大家介绍的使用express+multer实现node中的图片上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jquery滚动特效集锦
Jun 03 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
localStorage实现便签小程序
Nov 28 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 #Javascript
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
Vue组件化开发思考
Feb 02 #Javascript
微信小程序实现导航栏选项卡效果
Jun 19 #Javascript
解析Vue.js中的组件
Feb 02 #Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
You might like
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python多线程和多进程关系详解
2020/12/14 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
一篇.NET面试题
2014/09/29 面试题
物业经理求职自我评价
2013/09/22 职场文书
自荐信模版
2013/10/24 职场文书
会议主持词
2014/03/17 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
python开发制作好看的时钟效果
2022/05/02 Python