Express+multer は、ノード イメージをアップロードするための特定の手順を実装します。
今回は、express+multer を使用してノード イメージをアップロードする具体的な手順について説明します。 以下では、express+multerを使用してノードに画像アップロード機能を実装する方法を紹介します。具体的な内容は次のとおりです。 フロントエンドでは、ajax を使用して画像を非同期にアップロードし、ファイル入力を使用して画像をアップロードし、formdata オブジェクトを使用して画像データを処理し、サーバーに投稿します
ノードで multer
ミドルウェアを使用して、アップロードルーティングインターフェース
を処理します ドキュメントをマルター package.json
html部分<body> <p class="form-group"> <label>File input:</label> <input type="file" name="file" id="file"> <p id="result"></p> <img id="img" src=""> </p> <button id="upload" class="btn btn-default">提交</button> </body>
jsパート
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//上传图片的业务逻辑函数
function uploadFile(){
//上传图片的input
var file = document.getElementById("file")
//因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
//创建formdata对象
var formData = new FormData();
//给formdata对象中放入数据(键值对的方式)
formData.append('file',file.files[0]);
//提交请求
$.ajax({
url: '/upload',//请求路径
type: 'POST',
data: formData,
contentType: false,//为了让浏览器根据传入的formdata来判断contentType
processData: false,//同上
success: function(data){
if(200 === data.code) {
$('#result').html("上传成功！");
$('#img').attr('src',data.data);
} else {
$('#result').html("上传失败！");
}
console.log(2)
},
error: function(){
$("#result").html("与服务器通信发生错误");
}
});
console.log(1)
}
//给按钮添加点击事件
function postPage() {
//上传按钮
var uploada = document.getElementById('upload');
uploada.addEventListener("click",function () {
uploadFile();
},false);
}
window.onload = function () {
postPage();
}
</script>
const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(dirname, 'public')));
app.get('/',(req,res)=>{
res.sendFile(dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
//确定图片存储的位置
destination: function (req, file, cb){
cb(null, './public/uploadImgs')
},
//确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
filename: function (req, file, cb){
cb(null, Date.now()+file.originalname)
}
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
//图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
//线上的也就是服务器中的图片的绝对地址
var url = '/uploadImgs/' + req.file.filename
res.json({
code : 200,
data : url
})
});
http.createServer(app).listen(3000,()=>{
console.log('server is listening')
})再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}
推奨書籍:
Django の Cookie の使用方法の詳細な説明以上が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）
ホットトピック
7549
15
1382
52
83
11
22
90
FastAPI でファイルのアップロードと処理を実装する方法
Jul 28, 2023 pm 03:01 PM
FastAPI でファイルのアップロードと処理を実装する方法 FastAPI は、使いやすく強力な最新の高パフォーマンス Web フレームワークで、ファイルのアップロードと処理のネイティブ サポートを提供します。この記事では、FastAPI フレームワークでファイルのアップロードおよび処理関数を実装する方法を学び、具体的な実装手順を示すコード例を示します。まず、必要なライブラリとモジュールをインポートする必要があります: fromfastapiimportFastAPI,UploadF
nvmでノードを削除する方法
Dec 29, 2022 am 10:07 AM
nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環境変数を構成し、バージョン番号を確認します; 3. 「nvm」を使用しますinstall" コマンド ノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。
Express を使用してノード プロジェクトでファイルのアップロードを処理する方法
Mar 28, 2023 pm 07:28 PM
ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。
Kugou に独自の音楽をアップロードする簡単な手順
Mar 25, 2024 pm 10:56 PM
1. Kugou Music を開き、プロフィール写真をクリックします。 2. 右上隅にある設定アイコンをクリックします。 3. [音楽作品をアップロード]をクリックします。 4. [作品アップロード]をクリックします。 5. 曲を選択し、[次へ]をクリックします。 6. 最後に[アップロード]をクリックします。
QQ Musicに歌詞をアップロードする方法
Feb 23, 2024 pm 11:45 PM
デジタル時代の到来により、音楽プラットフォームは人々が音楽を入手する主な方法の 1 つになりました。しかし、曲を聴いていると歌詞がないことに気づき、非常に不安になることがあります。曲の内容や感情をより深く理解するために、曲を聴くときに歌詞が表示されることを望む人は多いでしょう。 QQ Music は中国最大の音楽プラットフォームの 1 つとして、ユーザーがより音楽を楽しみ、曲の含意を感じることができるように、ユーザーに歌詞をアップロードする機能も提供しています。 QQ Musicに歌詞をアップロードする方法を紹介します。初め
Win10パソコンでアップロード速度が遅い問題を解決する方法
Jul 01, 2023 am 11:25 AM
Win10コンピュータのアップロード速度が遅い場合、どうすれば解決できますか?コンピュータを使用しているときに、ファイルのアップロード速度が非常に遅いと感じることがありますが、これはどういうことでしょうか?実際、これはコンピュータのデフォルトのアップロード速度が 20% であるため、アップロード速度が非常に遅いためです。詳細な操作方法を知らない友人も多いです。編集者は、Win11 で C ドライブをフォーマットする手順を以下にまとめました。 . 興味のある方はフォローしてみてください！ Win10 のアップロード速度が遅い場合の解決策 1. win+R を押して「ファイル名を指定して実行」を呼び出し、「gpedit.msc」と入力して Enter を押します。 2. 管理テンプレートを選択し、[ネットワーク] - [Qos パケット スケジューラ] をクリックし、[制限] をダブルクリックして帯域幅を予約します。 3. 「有効」を選択します。
Nodeのプロセス管理ツール「pm2」を徹底分析
Apr 03, 2023 pm 06:02 PM
この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。
パソコンのアップロード速度を改善する方法
Jan 15, 2024 pm 06:51 PM
アップロード速度が非常に遅くなりますか?これは、多くの友人がコンピューターにアップロードするときに遭遇する問題だと思います。コンピューターを使用してファイルを転送するときにネットワークが不安定だと、アップロード速度が非常に遅くなります。では、ネットワークのアップロード速度を上げるにはどうすればよいでしょうか?以下では、エディターがコンピューターのアップロード速度が遅いという問題を解決する方法を説明します。ネットワーク速度に関しては、Web ページを開く速度、ダウンロード速度、アップロード速度も非常に重要であることは誰もが知っています。特に一部のユーザーはファイルをネットワーク ディスクにアップロードする必要があることが多いため、アップロード速度が速いと間違いなく節約になります。お金がたくさんあります。時間がなくなりました。アップロード速度が遅い場合はどうすればよいですか?以下では、エディターがコンピューターのアップロード速度が遅い場合の対処方法についての写真とテキストを提供します。コンピューターのアップロード速度が遅いという問題を解決するには、「スタート」-「ファイル名を指定して実行」または「Window キー」をクリックします。
