ホームページ > 記事 > ウェブフロントエンド > Express multerのアップロードと使い方の詳細説明
Express multerのアップロードと使い方の詳細説明
- 小云云オリジナル
- 2018-01-20 10:30:381743ブラウズ
この記事では主にExpressシリーズでのmulterアップロードの使い方を紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
私はこの 2 日間、「NodeJS の決定版ガイド」を読んでいます。この本はずっと読んでいたのですが、今回はじっくり読んだことがありませんでした。
主に wenpack の使用に関するいくつかの詳細により、まだかなり多くのメリットがあります。また、ノードで混乱することもなくなりました。しかし、正直に言うと、現在のレベルでノードを使用して何かを直接行うのはかなり困難です。今日は、mongodbとmysqlデータベースへのリンクをテストしましたが、それは使用できますが、まだ奇妙です。したがって、最初に既存のフレームワークを使用し、次にノードを後方から学習したいと思います。
フレームワークには、expressを選択しました。主な目的は、いくつかの本で言及されているミドルウェアをテストすることです。少し早く書かれたもので、多くのAPIが古いため、公式Webサイトに従って更新された場所を少しずつ見つけました。
私が現在便利だと感じているのは、multer と static です。
後者はページをローカルでデバッグでき、モバイル ページで特に便利です。
今回は主に multer について話します。まだすべての機能を実装しているわけではなく、画像を 1 枚アップロードする機能のみを実装しています。その他の機能についても説明します。
これはファイルのディレクトリ全体です。主に 2 つのファイルがあり、1 つはルート ディレクトリの main.js で、もう 1 つは public/index.html です。
コードを入力します:
//main.js
let express = require('express');
var multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/');
},
filename: function (req, file, cb) {
cb(null, Date.now() + '.png');
}
})
var upload = multer({ storage: storage })
//var upload = multer({ dest: 'public/' })
let app = express()
app.use(express.static('public'))
app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
console.log(req.file)
res.send(req.file)
})
app.listen(3300,'127.0.0.1')<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="file" accept="image/*">
<p id="result"></p>
<img src="" alt="" id="img" width="40" height="40">
<script>
let file = document.getElementById('file');
file.onchange = function (e) {
let file = e.target.files[0];
let xhr = new XMLHttpRequest();
let fd = new FormData();
fd.append('myfile', file)
xhr.open('post', '/public/index.html')
xhr.onload = function () {
// console.log(xhr)
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText)
document.getElementById('result').innerHTML = this.response
document.getElementById('img').src = data.filename
}
}
xhr.send(fd)
}
</script>
</body>
</html>jqueryライブラリを参照したくないので、一般的に言えば、ボタンをクリックした後は難しくありません。画像を選択するには、画像情報をキー名
myfile のオブジェクトに入れてバックグラウンドに渡します。
Express は受信した画像を /public/ ファイルに保存します。ここには小さな落とし穴があります。 main.js でこのコード行をコメントしたことがわかります: myfile的对象中，传给后台。
express把接受到的图片存储在/public/文件下，这里有个小小的坑。可以看到我在main.js注释了这样一行代码：
var upload = multer({ dest: 'public/' })其实最开始的时候我用的就是这一行代码，dest的意思是选择一个路径去存储文件，但是这样写有一个小小的问题，存入进来的文件是没有后缀名的。
我在向前台返回数据的时候
res.send(req.file)
这个问题就很严重，比如一个场景是我上传一张图片做头像，但是等我下次进入自己的个人页面，后台给我返回的数据没有办法作为图片的地址使用，这就很麻烦了。所以在网上找了一个原因，就把上面的代码注释换成了这个：
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/');
},
filename: function (req, file, cb) {
cb(null, Date.now() + '.png');
}
})
var upload = multer({ storage: storage })destination是文件存储的地址，filename设置的是文件的名字，那在这里如果写成这种：
filename: function (req, file, cb) {
cb(null, file.fieldname + '.png');
}你会发现你传入的每一张图片的名字都是myfile.png
rrreee
dest を意味します。 > ファイルを保存するパスを選択することですが、この方法で保存するファイルには接尾辞がありません。
フロントデスクにデータを返すとき
destination はファイルが保存されているアドレス、filename です。ここで次のように記述されている場合、ファイルの名前が設定されています:
myfile.png であることがわかります。古いものを上書きします。したがって、渡されたすべての画像を保存するために、上書きされないように、Date.now() を画像ごとに異なる識別子として使用します。 🎜🎜今回はここまでです。次回もっと写真をアップロードするときに更新します。 🎜🎜🎜関連する推奨事項: 🎜🎜🎜🎜ファイルアップロード機能を実装するためのAjaxとnode.js multerの詳細な説明🎜🎜🎜🎜multerの定義と使用法の概要🎜🎜🎜🎜Nodejsの高度な: Express+multerに基づくファイルアップロードの例🎜🎜以上がExpress multerのアップロードと使い方の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。