nodeはローカルファイルを構築してサーバーをアップロードします.

3668 ワード
nodeJS node.js node ファイルサーバ
ずっとnodeを使ってファイルサーバーを作ってみたいです.今日は簡単に書いてみました.後は徐々に完璧になります.一緒に勉強します.
まず、私達はファイルをアップロードする時、多くの時にファイルサーバに使用します.先端から言えば、ファイルサーバをファイルサーバにアップロードして、ファイルサーバを私達にアップロードしたファイルの訪問先に返します.
つまり、ファイルサーバはまず私達の前端にアップロードされたデータを読み取ってから、サーバーの指定されたディレクトリにファイルを保存して、最後に保存先をデータベースに保存して、フロントに返す必要があります.
原理を知ってから、考え方が明確になります.
準備工作
     nodeの環境を保証する必要があります.
     具体的なnodeのインストール(windowsとlinux)はブロガーのもう一つのブログを見ます.https://blog.csdn.net/rolinabc/article/details/99623255?spm=1001.2014.3005.1501
     フォルダnode(任意の名前)を作成し、ファイルserve.js(サーバファイル)とindex.htmlを作成します.また、uploadsフォルダがあります.
     nodeフォルダの下でコンソールを開き、npm initを実行します.実行が完了すると、一つのpackage.jsonファイル、すなわちプロファイルが生成されます.
serverファイルの完備
    具体的なコードは下記の通りです.コメントはとても詳しいですよ.
     
//    npm install   express formidable 
//            ，  uploads   
var Express = require('express');
var App = Express();
var Path = require('path');
var Formidable = require('formidable');
var FS = require('fs');
 
App.all('*',function (req, res, next) {
  //     
  res.header('Access-Control-Allow-Origin', '*');
  //        
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  //        
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  next();
});
 
App.post('/upload', function(req, res){
  //         
    var form = new Formidable.IncomingForm();
    //       ，   form.parse()   ，     files       file  ，          File  ，      html5 multiple    。
    form.multiples = true;
    //             ,     /uploads    
    form.uploadDir = Path.join(__dirname, '/uploads');
    var dirUrl
    //          
    form.on('file', function(field, file) {
        var newName = file.name;
        //    
        FS.rename(file.path, Path.join(form.uploadDir,newName),function(err) {
            if(err){
                throw err;
            }
        });
        //              
        dirUrl = Path.join(form.uploadDir,newName)
    });
    //     
    form.on('error', function(err) {
        console.log('An error: 
' + err);
    });
    //         ,                
    form.on('end', function() {
        res.send(dirUrl);
    });
    //           
    form.parse(req);
  });
 
  //         
  var server = App.listen(1000, function(){
      console.log('Files Server listening on port 1000');
  })
先端のテストコード
    私はここでvueを使っています.これは大丈夫です.参考までに自分で書いてもいいです.



  
  
  
  Document
  
  





   

    
        
  
   

   
     new Vue({
       el:'#main',
       data:{}
     })
 上のコードに合わせて、ローカルファイルサーバを構築します.もちろん、私は直接に一回であなたがアップロードしたファイルのパスに戻りました.そのパスをデータベースに保存していません.
このステップは比較的簡単です.結局パスは全部手に入れました.
データをデータベースに挿入できないなら、私のもう一つのブログを見ることができます.https://blog.csdn.net/rolinabc/article/details/107003549?spm=1001.2014.3005.1501
(狂ったアムウェイ自身のブログ、あははははは)
先のおかずは鳥です.指摘して、一緒に勉強して、進歩してほしいです.
 
フロントエンドが自動的に画像を生成してダウンロードします.60行未満のコードです.