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学习笔记之Connect中间件应用实例
Jan 27 NodeJs
nodejs实现获取当前url地址及url各种参数值
Jun 25 NodeJs
Nodejs进阶:核心模块net入门学习与实例讲解
Nov 21 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
nodejs制作爬虫实现批量下载图片
May 19 NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
nodejs使用node-xlsx生成excel的方法示例
Aug 22 NodeJs
Nodejs文件上传、监听上传进度的代码
Mar 27 NodeJs
分享node.js实现简单登录注册的具体代码
Apr 26 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中使用sftp教程
2015/03/30 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python输出决策树图形的例子
2019/08/09 Python
Python numpy数组转置与轴变换
2019/11/15 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
大学旷课检讨书
2014/01/28 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
工作试用期自我评价
2015/03/10 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android