Heim > Artikel > Web-Frontend > Ajax arbeitet mit Node js Multer zusammen, um die Funktion zum Hochladen von Dateien zu implementieren

Ajax arbeitet mit Node js Multer zusammen, um die Funktion zum Hochladen von Dateien zu implementieren

亚连Original: 2018-05-22 10:00:341506Durchsuche

In diesem Artikel werden hauptsächlich Ajax und Node JS Multer zum Implementieren der Datei-Upload-Funktion vorgestellt. Freunde, die dies benötigen, können sich auf die

Anleitung

Als Node-Anfänger habe ich kürzlich an einer Chat-Software gearbeitet, die Registrierung, Anmeldung, Online-Einzel- und Mehrpersonen-Chat, Emoticon-Versand, verschiedene Datei-Up- und -Downloads, das Hinzufügen und Löschen von Freunden, das Speichern von Chat-Datensätzen und den Benachrichtigungston unterstützt Schalter, Hintergrundbildwechsel, Für Spiele und andere Funktionen wurde das Multer-Modul verwendet. Nach verschiedenen Dokumentensuchen und Demo-Beispielen habe ich schließlich die Funktion zum Hochladen einzelner Dateien erfolgreich implementiert, die das Hochladen der meisten Dateiformate unterstützt und auf der Webseite anzeigt gleichzeitig

Der Effekt

Fühlt es sich so an, als wäre WeChat sofort sichtbar? Ja, es basiert auf der Webversion von WeChat .

Um den Gesamteffekt zu erzielen, muss ich CSS und HTML verwenden und es ist das erste Mal, dass ich einen Blog poste Ich bin wirklich besorgt. In naher Zukunft werde ich den Code auf Github veröffentlichen.

Geben Sie den Code direkt unten ein, leicht missbrauchen

Konfiguration

Installation

Multer direkt über das cmd-Befehlsfenster installieren

npm install multer -save

Servercode

//引入http
const http=require("http");
//引入express
const express=require("express");
//引入multer
const multer=require("multer");
//创建服务器，绑定监听端口
var app=express();
var server=http.createServer(app);
server.listen(8081);
//建立public文件夹，将HTML文件放入其中，允许访问
app.use(express.static("public"));
//文件上传所需代码
//设置文件上传路径和文件命名
var storage = multer.diskStorage({
  destination: function (req, file, cb){
    //文件上传成功后会放入public下的upload文件夹
    cb(null, &#39;./public/upload&#39;)
  },
  filename: function (req, file, cb){
    //设置文件的名字为其原本的名字，也可以添加其他字符，来区别相同文件，例如file.originalname+new Date().getTime();利用时间来区分
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
//处理来自页面的ajax请求。single文件上传
app.post(&#39;/upload&#39;, upload.single(&#39;file&#39;), function (req, res, next) {
  //拼接文件上传后的网络路径，
  var url = &#39;http://&#39; + req.headers.host + &#39;/upload/&#39; + req.file.originalname;
  //将其发回客户端
  res.json({
    code : 1,
    data : url
  });
  res.end();
});

Kundencode

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!--依托于jquery-->
  <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
  <p class="container">
    <label>file</label>
    <input type="file" name="file" id="file">
  </p>
<script>
      var file=$("#file")[0];
      //这里使用的是onchange事件，所以当你选择完文件之后，就触发事件上传
      file.onchange=function(){
        //创建一个FormDate
        var formData=new FormData();
        //将文件信息追加到其中
        formData.append(&#39;file&#39;,file.files[0]);
        //利用split切割，拿到上传文件的格式
        var src=file.files[0].name,
            formart=src.split(".")[1]; 
        //使用if判断上传文件格式是否符合                                                          
                                                              if(formart=="jpg"||formart=="png"||
        formart=="docx"||formart=="txt"||
        formart=="ppt"||formart=="xlsx"||
        formart=="zip"||formart=="rar"||
        formart=="doc"){
        //只有满足以上格式时，才会触发ajax请求
          $.ajax({
            url: &#39;/upload&#39;,
            type: &#39;POST&#39;,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
            //上传成功之后，返回对象data         
              if(data.code>0){
                var src=data.data;
                    //利用返回值src 网络路径，来实现上传文档的下载    
                    if(formart=="docx"||formart=="txt"||formart=="doc"){
                    //结合css样式，实现显示图标
                  var className="docx";
                    //拼接html，生成到页面上去  
                  var msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else if(formart=="ppt"){
            //PPT 格式
                    className="ppt";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else if(formart=="xlsx"){
            //xlsx 格式
                    className="xlsx";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
          }else if(formart=="zip"||formart=="rar"){
          //zip || rar 格式
                    className="zip";
                  msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
                }else{
          //所有的图片格式      
                  msg=`<a href="javascript:;" rel="external nofollow" class="picCheck"><img src="${src}"></a>`;
                }
                // 这里将msg 追加到你要显示的区域 
              }
            } 
         //不满足上传格式时 
        }else{
          alert("文件格式不支持上传")
        }
      }
</script>
</body>
</html>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft helfen.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung der AJAX-Anfragewarteschlange

AjaxDetaillierte Erläuterung der Schritte zum Implementieren des Wasserfall-Flow-Layouts (Code beigefügt)

jQuery+json macht Ajax-Aufruffunktion (Code beigefügt)

Das obige ist der detaillierte Inhalt vonAjax arbeitet mit Node js Multer zusammen, um die Funktion zum Hochladen von Dateien zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Schritte zum Starten der Änderung von Ports im KnotenbefehlsmodusNächster Artikel：Ausführliche Erläuterung der Schritte zum Starten der Änderung von Ports im Knotenbefehlsmodus

In Verbindung stehende Artikel

Mehr sehen