NodeJS实现图片上传代码(Express)

文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。

页面样式

Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片:

上传图片样式:

<div class="upload-container">

  <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />

</div>

CSS样式:

.upload-container {

  background-image: url(../../images/rv/add.jpg);

  background-repeat: no-repeat;

  width: 180px;

  height: 200px;

  padding-bottom: 10px;

  display: inline-block;

  vertical-align: middle;

  .fileupload {

    opacity: 0;

    filter: alpha(opacity=0);

    width: 200px;

    height: 200px;

  }

}

Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现:

$('.fileupload').change(function(event) {

  /* Act on the event */

  if ($('.fileupload').val().length) {

    var fileName = $('.fileupload').val();

    var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();

    if (extension == ".jpg" || extension == ".png") {

        var data = new FormData();

        data.append('upload', $('#fileToUpload')[0].files[0]);

        $.ajax({

          url: 'apply/upload',

          type: 'POST',

          data: data,

          cache: false,

          contentType: false, //不可缺参数

          processData: false, //不可缺参数

          success: function(data) {

            console.log(data);

          },

          error: function() {

            console.log('error');

          }

        });

    } 

  }

});

服务端保存

NodeJS服务端保存需要使用了第三方插件node-formidable,npm安装地址:

npm install formidable@latest 

上传图片

var cacheFolder = 'public/images/uploadcache/';<br>exports.upload = function(req, res) {

  var currentUser = req.session.user;

  var userDirPath =cacheFolder+ currentUser.id;

  if (!fs.existsSync(userDirPath)) {

    fs.mkdirSync(userDirPath);

  }

  var form = new formidable.IncomingForm(); //创建上传表单

  form.encoding = 'utf-8'; //设置编辑

  form.uploadDir = userDirPath; //设置上传目录

  form.keepExtensions = true; //保留后缀

  form.maxFieldsSize = 2 * 1024 * 1024; //文件大小

  form.type = true;

  var displayUrl;

  form.parse(req, function(err, fields, files) {

    if (err) {

      res.send(err);

      return;

    }

    var extName = ''; //后缀名

    switch (files.upload.type) {

      case 'image/pjpeg':

        extName = 'jpg';

        break;

      case 'image/jpeg':

        extName = 'jpg';

        break;

      case 'image/png':

        extName = 'png';

        break;

      case 'image/x-png':

        extName = 'png';

        break;

    }

    if (extName.length === 0) {

      res.send({

        code: 202,

        msg: '只支持png和jpg格式图片'

      });

      return;

    } else {

      var avatarName = '/' + Date.now() + '.' + extName;

      var newPath = form.uploadDir + avatarName;

      displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;

      fs.renameSync(files.upload.path, newPath); //重命名

      res.send({

        code: 200,

        msg: displayUrl

      });

    }

  });

};

不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:https://github.com/broofa/node-uuid

文件重命名:

fs.renameSync(files.upload.path, newPath); //重命名 

文件上传进度:

form.on('progress', function(bytesReceived, bytesExpected) {

});

node-formidable有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~

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

时间: 2017-06-29

Nodejs+angularjs结合multiparty实现多图片上传的示例代码

这次我们说一下nodejs+angularjs多图片上传的问题 此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑. 首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码(注意

nodejs 图片预览和上传的示例代码

本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

轻松创建nodejs服务器(10):处理上传图片

本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码 代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码 代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入

angular2+nodejs实现图片上传功能

在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认

ajax +NodeJS 实现图片上传实例

前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi

详解nodejs实现本地上传图片并预览功能(express4.0+)

Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax

图片上传之FileAPI与NodeJs

HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label> <div class="col-md-9"> <in

nodejs 整合kindEditor实现图片上传

kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单 环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加form

nodejs利用ajax实现网页无刷新上传图片实例代码

通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormData()对象可以有效的解决这个问题 废话不多说 直接上关键代码: html部分 <div class="form-group"> <label>File input</label> <input type="file" name="file" id="file">

swfupload ajax无刷新上传图片实例代码

最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点.这里用到的是一个插件swfupload 实现无刷新上传图片.直接上传我的代码供大家参考. 前台代码区: 复

php ajax无刷新上传图片实例代码

AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

Ajax实现无刷新分页实例代码

今天我们要用ajax做一个分页: 实现Ajax分页: 如果可以的话加上查询条件 找一张表做分页 分页不使用page类 页面不用刷新 Ajax加载数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.

jQuery+AJAX实现网页无刷新上传

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)

看点: 1.file_get_contents超时控制. 2.页面编码判断. 3.键盘Enter键捕捉响应. 4.键盘event兼容处理.//event = event || window.event; 5.XMLHttpRequest 和 jQuery 两种实现方案. 6.页面及源码同时展示. XMLHttpRequest版本 get_web.php 复制代码 代码如下: <?php header("Content-type: text/html; charset=utf-8"

jQuery 无刷新分页实例代码

复制代码 代码如下: <html> <head>     <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="script/jquery-1.7.1.js"></script>       

asp.net 无刷新分页实例代码

数据类代码: 复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Collections;using System.Reflection; namespace DAL{    public  class UserManageClass    {  

php+ajax无刷新上传图片的实现方法

本文实例讲述了php+ajax无刷新上传图片的实现方法.分享给大家供大家参考,具体如下: 1.引入文件 <!--图片上传begin--> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js">&l

PHP中ajax无刷新上传图片与图片下载功能

php ajax无刷新上传图片与图片下载功能的实现代码如下所示: <meta charset="utf-8" > <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p> 上传文件: <input type=