[解決済み] node.jsとexpressを使った画像のアップロード、表示、保存の方法【終了しました
質問
私は画像をアップロードして表示し、ローカルホストを更新したときにそれを失わないように保存する必要があります。これは、ファイル選択を要求する "Upload" ボタンを使用して行われる必要があります。
私は、サーバー側のコードにnode.jsとexpressを使用しています。
どのように解決するのですか?
まず、HTMLフォームに ファイル入力要素 . また を設定し、フォームの enctype 属性に multipart/form-data :
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file">
<input type="submit" value="Submit">
</form>
でフォームが定義されていると仮定して index.html という名前のディレクトリに格納されているとします。 public という名前のディレクトリに保存され、スクリプトが置かれている場所と相対的になっているので、この方法で提供できます。
const http = require("http");
const path = require("path");
const fs = require("fs");
const express = require("express");
const app = express();
const httpServer = http.createServer(app);
const PORT = process.env.PORT || 3000;
httpServer.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
// put the HTML file containing your form in a directory named "public" (relative to where this script is located)
app.get("/", express.static(path.join(__dirname, "./public")));
一旦これが行われると、ユーザーはそのフォームを通してサーバーにファイルをアップロードすることができるようになります。しかし、アップロードされたファイルをアプリケーションで再アセンブルするために、リクエストボディを (マルチパートのフォームデータとして) 解析する必要があります。
で
Express 3.x
を使用することができます。
express.bodyParser
ミドルウェアでマルチパートフォームを扱うことができましたが、現在では
エクスプレス 4.x
には、フレームワークにバンドルされているボディパーサーはありません。幸運なことに、あなたは以下のものの中から選ぶことができます。
多くの利用可能な
multipart/form-data
パーサがあります。
. ここで、私は
マルチ
:
フォーム投稿を処理するためのルートを定義する必要があります。
const multer = require("multer");
const handleError = (err, res) => {
res
.status(500)
.contentType("text/plain")
.end("Oops! Something went wrong!");
};
const upload = multer({
dest: "/path/to/temporary/directory/to/store/uploaded/files"
// you might also want to set some limits: https://github.com/expressjs/multer#limits
});
app.post(
"/upload",
upload.single("file" /* name attribute of <file> element in your form */),
(req, res) => {
const tempPath = req.file.path;
const targetPath = path.join(__dirname, "./uploads/image.png");
if (path.extname(req.file.originalname).toLowerCase() === ".png") {
fs.rename(tempPath, targetPath, err => {
if (err) return handleError(err, res);
res
.status(200)
.contentType("text/plain")
.end("File uploaded!");
});
} else {
fs.unlink(tempPath, err => {
if (err) return handleError(err, res);
res
.status(403)
.contentType("text/plain")
.end("Only .png files are allowed!");
});
}
}
);
上の例では .png に投稿されたファイルは /upload に保存されます。 アップロード ディレクトリに保存されます。
アップロードされた画像を表示するために、あなたが既に img 要素を含む HTML ページがあるとします。
<img src="/image.png" />
を使えば、expressアプリで別のルートを定義して
res.sendFile
を使用して保存された画像を提供します。
app.get("/image.png", (req, res) => {
res.sendFile(path.join(__dirname, "./uploads/image.png"));
});
関連
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Node.jsで終了する方法
-
[解決済み] AndroidのListViewで画像を遅延ロードする方法
-
[解決済み] Node.jsアプリケーションをデバッグするにはどうすればよいですか?
-
[解決済み] Node.js上のExpress.jsでGET(クエリ文字列)変数を取得する方法とは?
-
[解決済み] Bitmapオブジェクトに画像を読み込む際にOutOfMemoryが発生する問題
-
[解決済み] Node.JSを使用して、JSONファイルを(サーバー)メモリに読み込むにはどうすればよいですか?
-
[解決済み] Node.jsでファイルをダウンロードする方法(サードパーティライブラリを使用しない)?
-
[解決済み] Node.js:ENOSPCエラーとは何ですか、そしてどのように解決しますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ピンクの背景のアイコンを透明にするには?
-
[解決済み] kubernetesでデプロイメント/イメージを削除する方法
-
[解決済み] RGBAカラーをRGBに変換する
-
[解決済み] アニメーションGIFの代替品にはどんなものがありますか?[クローズド]
-
[解決済み】Kubernetesにイメージの再引き取りを強制する方法は?
-
[解決済み】Base64でエンコードされた画像をディスクに保存するには?
-
[解決済み】ImageMagickを使って画像を "Diff "する。
-
[解決済み] HTML5 アップロード前に画像をプリリサイズする
-
[解決済み] knitr for markdownを使用してローカルイメージのサイズを設定する方法は?
-
[解決済み】FFmpegで画像から動画を作成する方法は?