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


Posted in NodeJs onSeptember 30, 2017

本文介绍了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);
  }

 }
 //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
    });
  }
});

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

NodeJs 相关文章推荐
nodeJs内存泄漏问题详解
Sep 05 NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
初探nodeJS
Jan 24 NodeJs
nodejs中模块定义实例详解
Mar 18 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
Mar 28 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
nodejs+mongodb aggregate级联查询操作示例
Mar 17 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
关于NodeJS中的循环引用详解
Jul 23 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
Nodejs调用WebService的示例代码
Sep 29 #NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
Sep 29 #NodeJs
Nodejs实现文件上传的示例代码
Sep 26 #NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 #NodeJs
使用vs code开发Nodejs程序的使用方法
Sep 21 #NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 #NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 #NodeJs
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python编程线性回归代码示例
2017/12/07 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
python能做哪些生活有趣的事情
2020/09/09 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
幼儿园标语大全
2014/06/19 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
导游词之峨眉山
2019/12/16 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电