ajax +NodeJS 实现图片上传实例


Posted in NodeJs onJune 06, 2017

前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接“拿来”用

ajax +NodeJS 实现图片上传实例

note(注意)

大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片

安装multer模块:

npm i -S multer

code(代码)

1.app.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

//所有请求过来,都去项目当前的public目录下寻找所请求的文件,找到就返回
app.use(express.static('./public'));

//选择diskStorage存储
const storage = multer.diskStorage({
 destination: function (req, file, cb) {
  cb(null, path.resolve('public/uploads'));
 },
 filename: function (req, file, cb) {
  cb(null, Date.now() + path.extname(file.originalname));//增加了文件的扩展名
 }
});

const upload = multer({storage: storage});

app.post('/profile', upload.single('avatar'), function(req, res, next) {

 res.send({
  err: null,
  //filePath:就是图片在项目中的存放路径
  filePath: 'uploads/' + path.basename(req.file.path)
 });
});

app.listen(3000, function () {
 console.log("app is listening 3000 port");
});

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

</head>
<body>
<form class="form-horizontal" enctype='multipart/form-data' method='post' action='javascript:;'>
  <input type="file" id="choose"/>
  <button onclick="handle()">上传</button>
  <img class="newImg"/>
</form>

<script>
  function handle() {
   //获取上传的File对象,此处是一张图片对象
    let file = document.getElementById("choose").files[0];
    let formData = new FormData();
    formData.append("avatar", file);//设置key为avartar,value为上述的File对象
    $.ajax({
      type: 'POST',
      url: '/profile',
      data: formData,
      processData: false,
      success: function (data) {
        $(".newImg").attr("src", data.filePath);//上传成功则图片显示
      },
      error: function (err) {
        console.log(err.message);
      }
    })
  }
</script>
</body>
</html>

demo地址在这

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs中自定义事件实例
Jun 20 NodeJs
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
nodejs+express实现文件上传下载管理网站
Mar 15 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
Nodejs调用WebService的示例代码
Sep 29 NodeJs
nodejs更改项目端口号的方法
May 13 NodeJs
webpack打包nodejs项目的方法
Sep 26 NodeJs
nodejs更新package.json中的dependencies依赖到最新版本的方法
Oct 10 NodeJs
NodeJS有难度的面试题(能答对几个)
Oct 09 NodeJs
详解Nodejs之静态资源处理
Jun 05 #NodeJs
nodejs集成sqlite使用示例
Jun 05 #NodeJs
详解nodeJS之二进制buffer对象
Jun 03 #NodeJs
深入理解Nodejs Global 模块
Jun 03 #NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 #NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 #NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 #NodeJs
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python 模拟登陆github的示例
2020/12/04 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
Java servlet面试题
2012/03/04 面试题
质检部职责
2013/12/28 职场文书
考核评语大全
2014/04/29 职场文书
投资意向书
2014/07/30 职场文书
辛亥革命观后感
2015/06/02 职场文书
社区干部培训心得体会
2016/01/06 职场文书
大学生创业计划书
2019/06/24 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
如何利用React实现图片识别App
2022/02/18 Javascript