ホームページ > 記事 > ウェブフロントエンド > マルチターアップロードの使い方
マルチターアップロードの使い方
- php中世界最好的语言オリジナル
- 2018-04-16 11:43:181395ブラウズ
今回はmulter Uploadの使い方と、Multer Uploadを使用する際の注意点を紹介します。実際の事例を見てみましょう。
主に 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ライブラリを参照したくないので、ネイティブajaxを書きました。簡単に言うと、ボタンをクリックして画像を選択した後、画像情報がオブジェクトに配置されます。キー名 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 であり、新しい画像が古い画像を上書きすることがわかります。したがって、渡されたすべての画像を保存するために、上書きされないように、Date.now() を画像ごとに異なる識別子として使用します。
今回はここまでです。次回もっと写真をアップロードするときに更新します。
この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
BootStrapのテキストエディタコンポーネントSummernoteの使い方を詳しく解説
jqueryを使って配列データを送信し、springmvcで受け取る方法
以上がマルチターアップロードの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。