绵阳梓潼网站制作公司

使用nodejs怎么实现一个图片预览和上传功能

使用nodejs怎么实现一个图片预览和上传功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了本溪免费建站欢迎大家使用！

本地图片预览

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

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

单个图片预览

html 部分

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 部分

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

javascript

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

 $(function(){
    var upload={
      txtUploadFile:$('#txtUploadFile'), //上传单个文件
      txtUploadFileList:$('#txtUploadFileList'), //上传多个文件
      btnSend:$('#btnSend'), //上传文件
      preview:$('#preview'),//图片预览盒子
      //预览图片加载
      previewImgLoad:function(fileList){
        for(var i=0;i
 /*
    上传单个文件
    这里是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
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
看完上述内容，你们掌握使用nodejs怎么实现一个图片预览和上传功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
            
            
                            

                当前题目：使用nodejs怎么实现一个图片预览和上传功能                

                文章位置：http://myzitong.com/article/goschh.html

其他资讯