ノードが画像アップロードを実装する方法についての簡単な説明
この記事では、node が画像ファイルのアップロードを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する推奨事項: 「nodejs チュートリアル 」
Web 開発では、ファイルのアップロード、特に画像のアップロードは非常に重要な問題です。そして、拡張された「プログレスバー」、「ファイルサイズ」、そして有名な「クロスドメイン」の問題です。
このデモは画像のアップロードを示しており、サーバー コードはノードです。
フロントエンド部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="file" name="file" accept="image/*" onchange="changeImg(event)"/>
<button onclick="submit()">上传</button>
<script>
let file = ''
let fileName = ''
function submit() {
let data = new FormData()
data.append('imgName', fileName)
data.append('img', file)
axios({
method: 'post',
timeout: 2000,
url: 'http://localhost:8081/postApi',
data: data
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
function changeImg(e) {
file = e.target.files.item(0) //只能选择一张图片
// 如果不选择图片
if (file === null) {
return
}
fileName = file.name
}
</script>
</body>
</html>採用axiosを使用してリクエストを送信——実際には、別の「クロスドメインリクエスト」を使用することもできます。メソッド」はここ（vue-resource）にありますが、ここで考えました。または、バックエンド設定クロスドメイン方法を使用します。
バックエンド パート
これがこの記事の焦点です。効率的かつスムーズな方法でファイル アップロード リクエストを解析するために、最初に formidable# を導入します。 # #ライブラリ:
npm install formidable --save
もちろん、アップロードされた画像を保存するための myImage ファイルを作成する必要があります。次に、IncomingForm インスタンス フォームを作成し、保存パスを myImage フォルダーに設定します。コードは次のとおりです:
const http=require('http');
const formidable=require('formidable');
var server=http.createServer(function(req,res){
// 后端设置跨域
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Headers','Content-Type');
res.setHeader('Content-Type','application/json');
switch(req.method){
case 'OPTIONS':
res.statusCode=200;
res.end();
break;
case 'POST':
upload(req,res);
break;
}
})
function upload(req,res){
if(!isFormData(req)){
res.statusCode=400;
res.end('请求错误,请使用multipart/form-data格式');
return;
}
var form=new formidable.IncomingForm();
// 设置上传图片保存文件
form.uploadDir='./myImage';
form.keepExtensions=true;
form.on('field',(field,value)=>{
console.log(field);
console.log(value);
})
form.on('end',()=>{
res.end('上传完成!');
})
form.parse(req);
}
function isFormData(req){
let type=req.headers['content-type'] || '';
return type.includes('multipart/form-data');
}
server.listen(8081,function(){
console.log('port is on 8081');
})アップロードの進行状況を追加
これは、私たちがよく使用するものであり、確認したいものでもあります。これにより、ユーザーに優れたエクスペリエンスが提供されます。 上記のコードに
form.on('progress',(bytesReceived,bytesExpected)=>{
var precent=Math.floor(bytesReceived/bytesExpected*100);
console.log(precent);
})formidable
恐るべきモジュールは、画像とビデオのアップロードとエンコードを実装します。 GB レベルのアップロード データ処理をサポートし、複数のクライアント データ送信をサポートします。テストカバレッジが非常に高く、実稼働環境での使用に非常に適しています。 恐るべきモジュールのメソッドとプロパティ - 周り:
Formidable.incomingForm()
var form = new formidable.IncomingForm()；
form.encoding='utf-8';
form.uploadDir='/tmp/';
form.keepExtensions=false
form.parse(req,function(err,fields,files){
//...
});プログラミング ビデオをご覧ください。 ！
以上がノードが画像アップロードを実装する方法についての簡単な説明の詳細内容です。詳細については、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）
ホットトピック
7509
15
1378
52
78
11
19
63
Workerman ドキュメントにファイルのアップロードとダウンロードを実装する
Nov 08, 2023 pm 06:02 PM
Workerman ドキュメントでファイルのアップロードとダウンロードを実装するには、特定のコード サンプルが必要です はじめに: Workerman は、シンプル、効率的、使いやすい高性能 PHP 非同期ネットワーク通信フレームワークです。実際の開発では、ファイルのアップロードとダウンロードが一般的な機能要件となりますが、この記事では、Workerman フレームワークを使用してファイルのアップロードとダウンロードを実装する方法と、具体的なコード例を紹介します。 1. ファイル アップロード: ファイル アップロードとは、ローカル コンピューター上のファイルをサーバーに転送する操作を指します。以下が使用されます
Laravelを使用してファイルのアップロードおよびダウンロード機能を実装する方法
Nov 02, 2023 pm 04:36 PM
Laravel を使用してファイルのアップロードおよびダウンロード機能を実装する方法 Laravel は、Web アプリケーションの開発をより簡単かつ効率的にするための豊富な機能とツールを提供する人気のある PHP Web フレームワークです。よく使用される機能の 1 つは、ファイルのアップロードとダウンロードです。この記事では、Laravelを使用してファイルのアップロードおよびダウンロード機能を実装する方法と、具体的なコード例を紹介します。ファイルのアップロード ファイルのアップロードとは、ローカル ファイルを保存するためにサーバーにアップロードすることを指します。 Laravelではファイルアップロードを使用できます
gRPC を使用して Golang でファイルのアップロードを実装するにはどうすればよいですか?
Jun 03, 2024 pm 04:54 PM
gRPC を使用してファイルのアップロードを実装するにはどうすればよいですか?リクエストおよびレスポンスメッセージを含むサポートサービス定義を作成します。クライアントでは、アップロードされるファイルが開かれてチャンクに分割され、gRPC ストリーム経由でサーバーにストリーミングされます。サーバー側では、ファイル チャンクが受信され、ファイルに保存されます。ファイルのアップロードが完了すると、サーバーはアップロードが成功したかどうかを示す応答を送信します。
Javaファイルアップロード例外(FileUploadException)の解決方法
Aug 18, 2023 pm 12:11 PM
Java ファイルアップロード例外 (FileUploadException) を解決する方法 Web 開発でよく遭遇する問題の 1 つは、FileUploadException (ファイル アップロード例外) です。この問題は、ファイル サイズが制限を超えている、ファイル形式が一致していない、サーバー構成が正しくないなど、さまざまな理由で発生する可能性があります。この記事では、これらの問題を解決するいくつかの方法について説明し、対応するコード例を示します。アップロードされるファイルのサイズを制限する ほとんどのシナリオでは、ファイル サイズを制限します
WeChatアプレットは画像アップロード機能を実装
Nov 21, 2023 am 09:08 AM
WeChat アプレットが画像アップロード機能を実装 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業 コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。
PHPを使用してFTPファイルアップロードの進行状況バーを実装する方法
Jul 30, 2023 pm 06:51 PM
PHP を使用して FTP ファイル アップロード プログレス バーを実装する方法 1. 背景の紹介 Web サイト開発では、ファイル アップロードは一般的な機能です。大きなファイルのアップロードでは、ユーザー エクスペリエンスを向上させるために、多くの場合、ファイルのアップロード プロセスをユーザーに知らせるために、アップロードの進行状況バーを表示する必要があります。この記事では、PHPを使用してFTPファイルアップロードのプログレスバー機能を実装する方法を紹介します。 2. FTP ファイルアップロードのプログレスバー実装の基本的な考え方. FTP ファイルアップロードのプログレスバーは通常、アップロードされたファイルのサイズとアップロードされたファイルのサイズを計算することによって計算されます。
PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
Mar 05, 2025 pm 05:57 PM
ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています
PHP ファイル アップロード ガイド: move_uploaded_file 関数を使用してアップロードされたファイルを処理する方法
Jul 30, 2023 pm 02:03 PM
PHP ファイル アップロード ガイド: move_uploaded_file 関数を使用してアップロードされたファイルを処理する方法 Web アプリケーションの開発では、ファイルのアップロードが一般的な要件です。 PHP には、アップロードされたファイルを処理するための便利な関数 move_uploaded_file() が用意されています。この記事では、この機能を使ってファイルアップロード機能を実装する方法を紹介します。 1. 準備 開始する前に、PHP 環境がファイルアップロードパラメータで設定されていることを確認してください。これを行うには、php.in を開いてください。
