使用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 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js登录弹出层特效
Mar 07 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
小程序实现列表多个批量倒计时
Jan 29 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网站基础优化方法小结
2008/09/29 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python subprocess模块常见用法分析
2018/06/12 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python实现的config文件读写功能示例
2019/09/24 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
材料化学应届生求职信
2013/10/09 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
对祖国的寄语大全
2014/04/11 职场文书
大学生评语大全
2014/04/18 职场文书
协议书模板
2014/04/23 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
2016年清明节寄语
2015/12/04 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL