欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 21:58:15
本文介绍了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);
  }

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

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