NodejsとMulterで画像を投稿するにはどうすればよいですか？

ファイル（画像など）をアップロードして投稿することからなるアプリケーションを構築しようとしています。NodejsとMulterで画像を投稿するにはどうすればよいですか？

これは私がこれまでにやっていることです：

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

var storage = multer.diskStorage({ 
     destination: function (req, file, cb) { 
     cb(null, './public/img'); 
     }, 
     filename: function (req, file, cb){ 
     cb(null, file.originalname + '-' + Date.now()); 
     } 
    }); 

var upload = multer({storage: storage});

をので、上記のコードは、私が最後のポストに今すぐ「IMG」

module.exports = function(app){ 

    app.get('/', function(req, res){ 
     res.render('index'); 
    }); 

    app.post('/upload', upload.single('file'), function(req, res){ 

    res.send(req.file); 
    }); 
}

というフォルダにアップロードしたファイルを保存しますリクエスト私は 'req.file'のファイルに関するすべてのメタデータ情報を取得します。私はそのファイルを入手して誰かがこの要求を出した場合に投稿したがっています：

app.get('/postedfiles', function(req, res){});

私はそれらをデータベースなどに保存してください。

出典

2017-09-06 Jeff Goes

実際には、選択したディレクトリ内にコンピュータ内部に保存されます。

これは、multerのアップロード用のプレーンhtml形式です。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post"> 
     <input type="file" name="avatar" value=""> 
     <input type="submit" name="" value="ssss"> 
    </form> 
    </body> 
</html>

これは私たちのバックエンドコードです。ストレージ内では、/uploadディレクトリにあるファイルをアップロードする場所を選択し、現在の時刻のファイル名を付けます。私たちはの変数を設定して宣言してから、upload.single('avatar')を使用していますが、ポストリクエストを受け取っている間にコールバックの直前に宣言しています。 の入力タグの中にhtml形式のファイル名が入っているのは、avatarです。コールバックではreq.fileを使用してファイルにアクセスできます。モジュールはこの方法でファイルを保存し、非常に使いやすいものにします。

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

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, __dirname + '/uploads')  //you tell where to upload the files, 
    }, 
    filename: function (req, file, cb) { 
    cb(null, file.fieldname + '-' + Date.now() + '.png') 
    } 
}) 

var upload = multer({storage: storage, 
    onFileUploadStart: function (file) { 
     console.log(file.originalname + ' is starting ...') 
    }, 
}); 

app.set('view engine', 'ejs'); 

app.get('/', function(req, res, next){  
    res.render('mult'); //our html document 
}) 

app.post('/profile', upload.single('avatar'), function (req, res, next) { 
    // req.file is the `avatar` file 
    console.log(req.file); 
    return false; 
})

ていることを確認し、それ以外の場合は、コンピュータで画像として考慮されることはありません、あなたは画像やPNGまたはJPEGのいずれかの拡張子を与える、またはあなたが使用したいものは何でも。

あなたは、ページを更新せずにクライアントに画像を表示するだけで、クライアントブラウザ上のGETリクエストでAJAXを使用したい場合は、あなたの質問に

を更新。 ウェブサーバーまたはウェブサーバーにファイルをアップロードし、そこから画像を取得することができます。たとえば、stackoverflowの私のプロフィール画像は保存されます here

getリクエストでparamsを使用して、サーバーからすべてのファイルを受け取ることができます。

例えば、クライアントが/uploads/imageOfApet.pngにgetリクエストをしたとします。

app.get('/uploads/:theImageName', function(req, res){ console.log(req.params.theImageName); //returns the imageOfApet.png var theName = req.params.theImageName; //imageOfApet.png res.sendFile(__dirname + "/uploads/" + theName); //Sending the user the file })

出典

2017-09-06 15:39:21 turmuka

私はそれを理解しました。途中であなたの答えをありがとう。しかし、私が望むのは、アップロードしたばかりの画像をウェブページ上でユーザーに表示できることです。そして私はそれをどうやって行うのか分からない。 –

喜んで更新@JeffGoesを参照してください – turmuka

たとえば、このコードファイルのファイルは 'uploads'ディレクトリに保存されています。私はwww.mywebsite.com/uploads/imageNumberOne.pngのような画像を私のウェブサイトにリンクすることができます – turmuka

NodejsとMulterで画像を投稿するにはどうすればよいですか？

答えて

関連する問題