Nodejs-Beispielcode für Bildvorschau und Hochladen

In diesem Artikel wird hauptsächlich der Beispielcode für die Bildvorschau und den Upload von nodejs vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dieser Artikel stellt den Beispielcode für die Bildvorschau und das Hochladen von nodejs vor und teilt ihn mit allen. Die Details sind wie folgt:

Der Effekt ist wie folgt folgt:

Vorwort

Im Allgemeinen müssen Sie das Bild lokal in der Vorschau anzeigen, bevor Sie es hochladen.

Die Front-End-Bildvorschau verwendet die readAsDataURL-Methode von FileReader

nodejs-Bild-Upload verwendet die Middleware Multer

local Bildvorschau

Das FileReader-Objekt ermöglicht es einer Webanwendung, den Inhalt einer Datei (oder eines Rohdatenpuffers), die auf dem Computer des Benutzers gespeichert ist, asynchron zu lesen, indem ein File- oder Blob-Objekt verwendet wird, um die zu lesende Datei anzugeben oder Daten.

Die Methode readAsDataURL wird verwendet, um den Inhalt des angegebenen Blobs oder der angegebenen Datei zu lesen. Wenn der Lesevorgang abgeschlossen ist, ist readyState abgeschlossen und Loadend wird ausgelöst. Zu diesem Zeitpunkt enthält das Ergebnisattribut die Daten als URL, die die Datei darstellt, als Base64-codierte Zeichenfolge.

Einzelbildvorschau

HTML-Teil

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

Javascript-Teil

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

Vorschau mehrerer Bilder

HTML-Bereich

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

Die Javascript-Teil

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

}

wird im Projekt verwendet

der Front-End-Teil

HTML

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

Javascript

js-Methodenteil ist zerlegt, es ist etwas lang, ihn in einen Codeblock zu packen (bitte überprüfen Sie beim Lesen den Kontext)

 $(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(&#39;photos&#39;,files[i]);
      }
      $.ajax({
        url: &#39;/upload/filesList&#39;,
        type: &#39;post&#39;,
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
          console.log(&#39;upload success&#39;);
          //到这里图片已经上传成功了.你可根据返回结果处理其他的业务逻辑
          if(res.status==1){
            // todo something
          }
        },
        error:function(){
          console.log(&#39;upload faild&#39;);
        }
      });

    });

nodejs-Teil

nodejs verwendet Multer-Middleware, die hauptsächlich zum Hochladen von Dateien verwendet wird

Multer installieren

npm install --save multer

Multer wird in NodeJS verwendet

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

Einzelbild-Upload

//如果图片上传成功会返回图片的存储路径
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)
    });
  }
});

Mehrere Bilder hochladen

// 如果图片上传成功会返回图片的存储路径（数组）
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(&#39;/uploads/&#39; + path.basename(req.files[i].path));
    }
    res.send({
      status:1,
      filesPath: filesPathArr
    });
  }
});

Das obige ist der detaillierte Inhalt vonNodejs-Beispielcode für Bildvorschau und Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!