前言

ファイルをアップロードするのはよくあるニーズで、私たちのexpressはもちろんこの機能が欠かせません.

multerは最も一般的なexpressアップロードミドルウェアです.次にmulterを用いたファイルアップロード処理について説明します.

簡単な紹介
公式ドキュメントを簡単に見て、コードを直接引くことに慣れています.はい、まず公式ドキュメントの紹介を見てみましょう.住所を参照(https://github.com/expressjs/multer).基本的な使用例copyをエディタに直接入力します.そして修正を加える.

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

//      
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

//      
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

//        
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

app.get('/', function (req, res, next) {
  res.sendfile('form.html');
})

app.listen(3000, function () {
    console.log('  3000    ');
})

私は公式例copyの後、サーバーを起動し、ファイルを要求するコードを追加しただけです.簡単ですよね～～.

コードディレクトリの下にformを新規作成します.htmlファイルは私たちのアップロードシステムをテストするために使用されます.

コードは次の

です.

    
    


    
multer uplpad file
    

        
          
    

上のコードのinputのnameとバックエンドが単一ファイルであれば単一ファイルのnameと一致することに注意してください.マルチファイルであれば、マルチファイルのnameと一致します.君は知っている.

node app

を起動します.
実戦練習

単一ファイル修正ファイル名

上記の練習を経て、チラシファイルを見つけた後、ファイルはサーバuploadディレクトリの下に存在しますが、ファイル名は読めない文字列です.ファイル名を必要な名前に変更する必要があります

参照ブロックdiskStorage

を採用

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

これでfilenameでファイル名を変更できます.ここにはファイル名に接尾辞がありません.ファイル名に接尾辞を付けます.

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + file.originalname.match('\.*'));
    }
})

マルチファイルのアップロード

inputタグにmultiple属性

を追加

その後、shiftまたはcontrolで複数を選択してアップロードすることができます.このプロパティがサポートされていない場合は、domを操作して複数のinputを生成する必要があります.ファイル名を取得するには、jqueryを使用してファイルinputイメージを取得し、名前を取得します.
複数のファイルを選択し、統合してアップロード
参照(http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)このコードは、ファイルを選択するたびに情報を残すだけで考えられます.

funGetFiles: function(e) {
    this.funDragHover(e);
        
    var files = e.target.files || e.dataTransfer.files;

    this.fileFilter = this.fileFilter.concat(this.filter(files));
    this.funDealFiles();
    return this;
}

これでいいです.それから処理したり、あなたが決めたり、現実のサムネイルを削除したりすることができます.

削除.つまり、ファイルの下付きラベルをラベルに保存し、下付きラベルに基づいてキュー内の対応するファイルを見つけて削除することができます.

サムネイル.html 5を使用するFileReaderオブジェクト

var reader = new FileReader();
reader.onload = function (e) {
    var thumbnail ＝ e.target.result;
}

まとめ

需要ガイドで直接コードを書き始め、コードを見ます.分からないなら文書を調べなさい.効率性の向上

リファレンスリンク

私のソースアドレス:https://github.com/suyunxue/demo/tree/master/multerUploadFile

multer公式ドキュメント(https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)

参考ブログ(http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html)

参考ブログ(http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)

参照コード(http://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html)

MDNFileReaderドキュメント、例(https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)

ファイルapi(http://javascript.ruanyifeng.com/htmlapi/file.html)

転載先:https://www.cnblogs.com/sufubo/p/7259972.html