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使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
nodejs实现黑名单中间件设计
Jun 17 NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
图片上传之FileAPI与NodeJs
Jan 24 NodeJs
nodejs基础知识
Feb 03 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
nodejs中express入门和基础知识点学习
Sep 13 NodeJs
独立部署小程序基于nodejs的服务器过程详解
Jun 24 NodeJs
nodejs nedb 封装库与使用方法示例
Feb 06 NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 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 禁止页面缓存输出
2009/01/07 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jquery uaMatch源代码
2011/02/14 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
js实现简单页面全屏
2019/09/17 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
文明礼仪事迹材料
2014/01/09 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
出纳员岗位职责
2014/03/13 职场文书
增员口号大全
2014/06/18 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
校车司机安全责任书
2015/05/11 职场文书
小学体育组工作总结2015
2015/07/21 职场文书