技术文章
当前位置:首页 > node.js技术文章 > 详解nodejs实现本地上传图片并预览功能(express4.0+)

nodejs实现本地上传图片并预览功能实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:97

这篇文章主要知识点是关于nodejs上传图片、nodejs、express上传图片、nodejs上传图片预览、nodejs 图片预览和上传的示例代码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

新时期的Node.js入门
  • 类型:nodejs大小:34.8 MB格式:PDF出版:清华大学出版社作者:李锴
立即下载

更多Node.js相关的学习资源可以参阅 Node.js电子书程序设计电子书 等栏目。

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

Express为:4.13.1  multyparty: 4.1.2

代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览

写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块

相关查看文档:

通过Ajax方式上传文件,使用FormData进行Ajax请求

node-multiparty github

FormData - Web APIs | MDN

部分代码:

<form name='picForm' action = "javascript:;"method="post" encype = "multipart/form-data" >
  <input type="file" id="test" id="j_imgfile">
</form>
<div>
  <img src="" id="j_imgPic">
</div>

 js中采用change事件,即当选完图片时就发送ajax请求

$('#j_imgfile').on('change',function(){
    // 判断上传文件类型
    var objFile = $('#j_imgfile').val();
    var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase();
    var formData = new FormData(document.forms.namedItem("picForm"));
    console.log(objType);
    if(!(objType == '.jpg'||objType == '.png'))
    {
      alert("请上传jpg、png类型图片");
      return false;
    }else{
      $.ajax({
        type : 'post',
        url : '/uploadUserImgPre',
        data: formData ,
        processData:false,
        async:false,
        cache: false, 
         contentType: false, 
        success:function(re){
          re.imgSrc = re.imgSrc.replace('public','');
          re.imgSrc = re.imgSrc.replace(/\\/g,'\/');
          $('#j_imgPic').attr('src',re.imgSrc);
        },
        error:function(re){
          console.log(re);
        }
      });  
    }
  });

 nodejs app.js里代码

app.post('/uploadUserImgPre',routes.users.uploadUserImgPre);

routes/users.js 里代码

 exports.uploadUserImgPre = function(req, res, next) {
 //生成multiparty对象,并配置上传目标路径
 var form = new multiparty.Form({uploadDir: './public/files/images'});
 form.parse(req, function(err, fields, files) {
  var filesTmp = JSON.stringify(files);
 
  if(err){
   console.log('parse error: ' + err);
  } else {
   testJson = eval("(" + filesTmp+ ")"); 
   console.log(testJson.fileField[0].path);
   res.json({imgSrc:testJson.fileField[0].path})
   console.log('rename ok');
  }
 });
}

部分说明:

文件上传至服务器后 路径path变为:public\files\images\W-jy9YsxsPjNpQHslzGvdXBk.jpg

由于在app.js中设置过public为默认路径,所以整理地址时需要去掉public,并且把‘\'变成‘/'

app.use(express.static(path.join(__dirname, 'public')));

 最后效果大概是这样的,html部分不一样~我的是jade模板,还有css什么的,并木有列出来

点击空白处,上传图片,接下来的功能就是点击上传把地址放到数据库里~(这个功能还木有做呢)

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

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

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

本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下:

效果如下:

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

前言

一般在上传图片之前需要暂存在本地预览一下。

前端图片预览用的是 FileReader的readAsDataURL方法

nodejs 图片上传用的是中间件 Multer

本地图片预览

FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据。

readAsDataURL方法用于读取指定的Blob或文件的内容。当读取操作完成后,readyState就完成了,并且触发了loadend。在那个时候,result属性将数据作为一个URL表示文件的数据,作为base64编码的字符串。

单个图片预览

html 部分

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

javascript 部分

function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();

 reader.addEventListener("load", function () {
  preview.src = reader.result;
 }, false);

 if (file) {
  reader.readAsDataURL(file);
 }
}

多张图片预览

html 部分

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

javascript 部分

function previewFiles() {

 var preview = document.querySelector('#preview');
 var files  = document.querySelector('input[type=file]').files;

 function readAndPreview(file) {

  // 支持的图片类型(可自定义)
  if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
   var reader = new FileReader();

   reader.addEventListener("load", function () {
    var image = new Image();
    image.height = 100;
    image.title = file.name;
    image.src = this.result;
    preview.appendChild( image );
   }, false);

   reader.readAsDataURL(file);
  }

 }
 https://files 就是input选中的文件,你也可以对上传图片个数进行限制 (files.length)
 if (files) {
  [].forEach.call(files, readAndPreview);
 }

}

项目中运用

前端部分

html

<input id="txtUploadFile" type="file">
<input id="txtUploadFileList" type="file" accept="image/jpeg,image/png,image/gif" multiple class="upload-file">
<div id="preview"></div>
<input id="btnSend" type="button" value="发送" class="btn btn-default">

javascript

js 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)

 $(function(){
    var upload={
      txtUploadFile:$('#txtUploadFile'), //上传单个文件
      txtUploadFileList:$('#txtUploadFileList'), //上传多个文件
      btnSend:$('#btnSend'), //上传文件
      preview:$('#preview'),//图片预览盒子
      //预览图片加载
      previewImgLoad:function(fileList){
        for(var i=0;i<fileList.length;i++){
          var tempFile=fileList[i];
          var reader = new FileReader();
          reader.readAsDataURL(tempFile);
          reader.onload=function (e) {
            var image = new Image();
            image.height = 100;
            image.title = tempFile.name;
            image.src = e.target.result;
            upload.preview.append(image);
          }
        }
      }
    }
  });
 
 /*
    上传单个文件
    这里是input改变时后直接上传(用于修改用户头像)
    你也可以在点击上传按钮后再上传,下面的多图上传会给出案例
    */
    upload.txtUploadFile.change(function(){
      var formData = new FormData();
      formData.append('avatar',upload.txtUploadFile[0].files[0]);
      $.ajax({
        url: '/upload/file',
        type: 'post',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
          console.log('upload success');
        },
        error:function(){
          console.log('upload faild');
        }
      });
    });
  //加载预览图片
    upload.txtUploadFileList.change(function(){
      var fileList=this.files;
      upload.previewImgLoad(fileList);
    });
//上传多张图片
    upload.btnSend.click(function(){
      var files = upload.txtUploadFileList.prop('files');
      if(files.length==0){
        //没有选择文件直接返回
        return;
      }
      var formData=new FormData();
      for(var i=0;i<files.length;i++){
        formData.append('photos',files[i]);
      }
      $.ajax({
        url: '/upload/filesList',
        type: 'post',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
          console.log('upload success');
          //到这里图片已经上传成功了.你可根据返回结果处理其他的业务逻辑
          if(res.status==1){
            // todo something
          }
        },
        error:function(){
          console.log('upload faild');
        }
      });

    });

nodejs 部分

nodejs 用的是Multer中间件,这个中间件主要用于上传文件

安装Multer

npm install --save multer

Multer在nodejs中使用

var express = require('express');
var multer = require('multer');
var app = express();

//磁盘存储引擎(说白了就是指定上传的文件存储到哪,当然你也可以对文件重命名等等)
var storage=multer.diskStorage({
  destination: function (req, file, cb) {
    //我这里是存储在public下的uploads目录
    cb(null, 'public/uploads/')  
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+"_" + file.originalname)
  }
});

单个图片上传

//如果图片上传成功会返回图片的存储路径
app.post('/upload/file', upload.single('avatar'), function(req, res) {
  if (!req.file) {
    console.log("no file received");
    return res.send({
      status: 0,
      filePath:''
    });
  } else {
    console.log('file received');
    res.send({
      status:1,
      filePath: '/uploads/' + path.basename(req.file.path)
    });
  }
});

多张图片上传

// 如果图片上传成功会返回图片的存储路径(数组)
app.post('/upload/filesList', upload.array('photos',9), function(req, res) {
  if (req.files==undefined) {
    console.log("no files received");
    return res.send({
      status: 0,
      filePath:''
    });
  } else {
    var filesPathArr=[];
    for(var i=0;i<req.files.length;i++){
      filesPathArr.push('/uploads/' + path.basename(req.files[i].path));
    }
    res.send({
      status:1,
      filesPath: filesPathArr
    });
  }
});

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

以上就是本次给大家分享的关于Node.js的全部知识点内容总结,大家还可以在下方相关文章里找到nodejs实现本地上传图片并、 nodejs中间层实现文件上传、 Node.js中使用计时器定时执、 等nodejs文章进一步学习,感谢大家的阅读和支持。

上一篇:Chrome DevTools直接调试Node.js和JavaScript的实例方法

下一篇:Node.js服务器作为api服务器的解决方案

展开 +

收起 -

相关电子书
学习笔记
网友NO.166049

NodeJS使用formidable实现文件上传

最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加、修改、播放和删除的功能,其中自然要实现音乐和图片的上传功能。于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能。该小demo用到了MySQL数据库,所有的数据都存放到了数据库中。下面简单说一些如何使用。 1.创建app.js主文件 const express = require('express');const router = require('./router');const path = require('path');const bodyParser = require('body-parser');const app = express();//静态资源服务app.use('/uploads', express.static(path.join(__dirname, 'uploads')));app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));//配置模板引擎app.set('views', path.join(__dirname, 'views'));app.engine('.html', require('ejs').renderFile);app.set('view engine', 'html');//配置解析普通表单post请求体app.use(bodyParser.urlencoded({extended:false}));//加载……

网友NO.598996

nodejs中间层实现文件上传的方法

一般情况下,前端的文件上传一般都是通过form表单的( input type=file / )来完成文件的上传,如果使用node中间层完成跨域,文件的上传就需要在node中间层处理成可读流,转成formData完成转发。 一、form表单文件上传 这是最常见的文件上传方式,通过form表单实现,简单实用,设置一下method、enctype、action属性就可以了,多文件上传需要设置multiple属性(部分浏览器支持还是有些问题的)。 form method=post enctype=multipart/form-data action=/api/upload input type=text name=username input type=password name=password input type=file name=file input type=submit/form 二、FormData实现文件上传 FormData对象用以将数据编译成键值对,以便向后台发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。对部分浏览器对multiple属性不支持的情况,可以使用formData的提交方式完成……

网友NO.814884

Nodejs进阶:基于express+multer的文件上传实例

概览 图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持。 常用的开源组件有multer、formidable等,借助这两个开源组件,可以轻松搞定图片上传。 本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘。 基础例子:借助express、multer实现单图、多图上传。 常用API:获取上传的图片的信息。 进阶使用:自定义保存的图片路径、名称。 环境初始化 非常简单,一行命令。 npm install express multer multer --save 每个示例下面,都有下面两个文件 ➜ upload-custom-filename git:(master) ✗ tree -L 1.├── app.js # 服务端代码,用来处理文件上传请求├── form.html # 前端页面,用来上传文件 基础例子:单图上传 app.js。 var fs = require('fs');var express = require('express');var multer = require('multer')var app = express();var upload = multer({ dest: 'upload/' });// 单图上传……

网友NO.205855

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添加formidable依赖,这里使用的是1.0.16版本,之后通过终端执行npm install完成依赖的安装 3.将kindEditor整个目录放到test/public/lib下 4.修改index.ejs和index.js文件 index.ejs中整合kindEditor: 设置kindEditor的uploadJson为nodejs所提供的处理图片上传的路由url这里用的是/uploadImg index.js中添加处理图片上传的路由url: 添加/uploadImg对应的post处理方式, 代码如下: index.js 复制代码 代码如下: !DOCTYPE html html head title%= title %/title link rel='stylesheet' href='/stylesheets/style.css' / script charset="utf-8" src="/lib/kindeditor-4.1.10/kindeditor.js"/script script ch……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息