Express multerのアップロードと使い方の詳細説明
この記事では主に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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7456
15
1376
52
77
11
14
10
C++のmode関数の詳しい解説
Nov 18, 2023 pm 03:08 PM
C++ のモード関数の詳細な説明 統計において、モードとは、一連のデータ内で最も頻繁に現れる値を指します。 C++ 言語では、モード関数を記述することによって、任意のデータセット内のモードを見つけることができます。モード関数はさまざまな方法で実装できます。一般的に使用される 2 つの方法を以下で詳しく紹介します。 1 つ目の方法は、ハッシュ テーブルを使用して各数値の出現回数をカウントすることです。まず、各数値をキー、出現回数を値とするハッシュ テーブルを定義する必要があります。次に、特定のデータセットに対して次を実行します。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
C++の剰余関数の詳しい解説
Nov 18, 2023 pm 02:41 PM
C++ の剰余関数の詳しい説明 C++ では、剰余演算子 (%) を使用して、2 つの数値を除算した余りを計算します。これは、オペランドが任意の整数型 (char、short、int、long など) または浮動小数点数型 (float、double など) になる二項演算子です。剰余演算子は、被除数と同じ符号の結果を返します。たとえば、整数の剰余演算の場合、次のコードを使用して実装できます。
Vue.nextTick関数の使い方と非同期更新での応用について詳しく解説
Jul 26, 2023 am 08:57 AM
Vue.nextTick 関数の使い方と非同期更新での応用について詳しく説明 Vue の開発では、DOM を変更した直後にデータを更新したり、関連する操作が必要になったりするなど、データを非同期で更新する必要がある状況によく遭遇します。データが更新された直後に実行されます。このような問題を解決するために登場したのが、Vue が提供する .nextTick 関数です。この記事では、Vue.nextTick 関数の使用法を詳しく紹介し、コード例と組み合わせて、非同期更新でのアプリケーションを説明します。 1.Vue.nex
PHPモジュロ演算子の役割と使い方を詳しく解説
Mar 19, 2024 pm 04:33 PM
PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。
Linuxシステムコールsystem()関数の詳細説明
Feb 22, 2024 pm 08:21 PM
Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。
Linuxのcurlコマンドの詳しい説明
Feb 21, 2024 pm 10:33 PM
Linuxのcurlコマンドの詳細な説明 要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンド ライン ツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。
