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教程之入门
Nov 21 NodeJs
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
nodejs创建web服务器之hello world程序
Aug 20 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
Nodejs--post的公式详解
Apr 29 NodeJs
深入解析nodejs HTTP服务
Jul 25 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
nodejs中各种加密算法的实现详解
Jul 11 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 NodeJs
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
Aug 20 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编程中的常见漏洞和代码实例
2014/08/06 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[08:40]Navi Vs Newbee
2018/06/07 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
后勤园长自我鉴定
2013/10/17 职场文书
公务员保密承诺书
2014/03/27 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
食品安全演讲稿
2014/09/01 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
单位接收函范文
2015/01/30 职场文书
教师个人发展总结
2015/02/11 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android