使用nodejs怎么實(shí)現(xiàn)一個(gè)圖片預(yù)覽和上傳功能

使用nodejs怎么實(shí)現(xiàn)一個(gè)圖片預(yù)覽和上傳功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

本地圖片預(yù)覽

FileReader對(duì)象允許web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容，使用文件或Blob對(duì)象來(lái)指定要讀取的文件或數(shù)據(jù)。

readAsDataURL方法用于讀取指定的Blob或文件的內(nèi)容。當(dāng)讀取操作完成后，readyState就完成了，并且觸發(fā)了loadend。在那個(gè)時(shí)候，result屬性將數(shù)據(jù)作為一個(gè)URL表示文件的數(shù)據(jù)，作為base64編碼的字符串。

單個(gè)圖片預(yù)覽

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

多張圖片預(yù)覽

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選中的文件，你也可以對(duì)上傳圖片個(gè)數(shù)進(jìn)行限制 （files.length）
 if (files) {
  [].forEach.call(files, readAndPreview);
 }

}

項(xiàng)目中運(yùn)用

前端部分

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="發(fā)送" class="btn btn-default">

javascript

js 方法部分拆開(kāi)了下,放在一個(gè)代碼塊中有點(diǎn)長(zhǎng) （閱讀時(shí)請(qǐng)查看上下文）

 $(function(){
    var upload={
      txtUploadFile:$('#txtUploadFile'), //上傳單個(gè)文件
      txtUploadFileList:$('#txtUploadFileList'), //上傳多個(gè)文件
      btnSend:$('#btnSend'), //上傳文件
      preview:$('#preview'),//圖片預(yù)覽盒子
      //預(yù)覽圖片加載
      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);
          }
        }
      }
    }
  });

 /*
    上傳單個(gè)文件
    這里是input改變時(shí)后直接上傳(用于修改用戶頭像)
    你也可以在點(diǎn)擊上傳按鈕后再上傳,下面的多圖上傳會(huì)給出案例
    */
    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');
        }
      });
    });

  //加載預(yù)覽圖片
    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){
        //沒(méi)有選擇文件直接返回
        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');
          //到這里圖片已經(jīng)上傳成功了.你可根據(jù)返回結(jié)果處理其他的業(yè)務(wù)邏輯
          if(res.status==1){
            // todo something
          }
        },
        error:function(){
          console.log('upload faild');
        }
      });

    });

nodejs 部分

nodejs 用的是Multer中間件，這個(gè)中間件主要用于上傳文件

安裝Multer

npm install --save multer

Multer在nodejs中使用

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

//磁盤存儲(chǔ)引擎（說(shuō)白了就是指定上傳的文件存儲(chǔ)到哪，當(dāng)然你也可以對(duì)文件重命名等等）
var storage=multer.diskStorage({
  destination: function (req, file, cb) {
    //我這里是存儲(chǔ)在public下的uploads目錄
    cb(null, 'public/uploads/')  
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+"_" + file.originalname)
  }
});

單個(gè)圖片上傳

//如果圖片上傳成功會(huì)返回圖片的存儲(chǔ)路徑
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)
    });
  }
});

多張圖片上傳

// 如果圖片上傳成功會(huì)返回圖片的存儲(chǔ)路徑（數(shù)組）
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
    });
  }
});

看完上述內(nèi)容，你們掌握使用nodejs怎么實(shí)現(xiàn)一個(gè)圖片預(yù)覽和上傳功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！