要件: ユーザーがファイルをアップロードし、ユーザーがアップロードされたファイルに簡単にアクセスできるようにする
1. フレームワークを使用して適切なプロジェクト構造を作成します。
node_express03_Scaffolding Express-generator_You Xiaobei のブログ - CSDN ブログ
そうでない場合は、express のスキャフォールディングとディレクトリ構造を紹介している上記のブログを参照してください。
2.レスポンシブhtmlファイルにより、ユーザーはファイルをアップロードできます
実際には、ユーザーへの ejs ファイルに応答することです. ejs ファイルは次のとおりです。
注: 属性をフォーム タグに追加する必要があります: enctype="multipart/form-data"。その後、input タグにも name 属性を設定する必要があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上传</title>
</head>
<body>
<!-- 必须加上 enctype="multipart/form-data" -->
<form action="/upload" method="post" enctype="multipart/form-data">
<!-- type、name 属性必填 -->
头像上传：<input type="file" name="upload" />
<button>提交</button>
</form>
</body>
</html>
3. 恐るべきファイルを受信して保存する
formidable は、ファイルのアップロードの処理に非常に適したパッケージです ( https://www.npmjs.com/package/formidable )。
ダウンロード：
npm i formidable輸入：
const formidable = require("formidable");用途: 手ごわい機能でファイルの保存パスを設定し、接尾辞を保持するオプションを設定する必要があります。アップロードされたカルチャの保存を実装できます。
var express = require("express");
var router = express.Router();
// 导入依赖
const formidable = require("formidable");
// 虽然 写的是 根路径，但实际访问的是 /upload 路径，如果 写了 /api ,那就是 /upload/api
router.post("/", function (req, res, next) {
// 创建 form 对象
const form = formidable({
multiples: true,
// 保存上传的文件的路径
uploadDir: __dirname + "/../public/images",
// 保留后缀
keepExtensions: true,
});
// 解析请求报文
form.parse(req, (err, fields, files) => {
if (err) {
next(err);
return;
}
console.log(files); // 包含需要的 newFilename 新文件名
res.send("ok");
});
});
module.exports = router;
4. ユーザーに送信
ユーザーが簡単にアクセスできるように、ファイルのアドレスをユーザーに提供します。リソースのストレージ パスを記録する必要がありますが、サーバーのドメイン名とポートの変更を考慮すると、パス全体を完全に記録することはできません。ルート ディレクトリからイメージへのパスを保存するだけです。
// 保存资源路径,前面省略的路径是 /public,这是资源路径，不用写
const url = "/images/" + files.upload.newFilename;
res.send("资源路径为" + url);