ホームページ > 記事 > ウェブフロントエンド > ノードが画像アップロードを実装する方法についての簡単な説明
ノードが画像アップロードを実装する方法についての簡単な説明
- 青灯夜游転載
- 2021-03-05 10:02:513787ブラウズ
この記事では、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 --saveformidable のストリーミング パーサーは、ファイルのアップロードを処理するための優れた選択肢です。つまり、アップロードされるデータのチャンクを受信し、解析し、特定の部分を吐き出すことができます。流れに慣れている人なら簡単に理解できるでしょう。この方法は速いだけでなく、大量のバッファリングが必要なためメモリの拡張が発生せず、ビデオなどの大きなファイルでも処理が圧迫されることはありません。
もちろん、アップロードされた画像を保存するための 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');
}) setHeader の 6、7、8 行目は特に重要で、これがバックエンド クロスドメインの本質です。
アップロードの進行状況を追加
これは、私たちがよく使用するものであり、確認したいものでもあります。これにより、ユーザーに優れたエクスペリエンスが提供されます。 上記のコードに
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';ファイルをアップロードするときに一時ファイルが保存される場所を設定するには、uploadDir を使用します。デフォルトのアップロードされた一時ファイルの保存場所は os.tmpDir();
form.uploadDir='/tmp/';ファイルのアップロードは可能です。 keepExtensions 属性で設定できます。一時ファイルのファイル名に拡張子が含まれるかどうか。この値が true の場合、拡張子は含まれます。それ以外の場合、拡張子は含まれません。
form.keepExtensions=falseさらに重要な「解析メソッド」もあります。これは、node.js のリクエストリクエストに含まれるフォームによって送信されたデータを解析します。 cb はリクエストを処理するためのコールバック関数です (必須ではありません)。
form.parse(req,function(err,fields,files){
//...
});プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！
以上がノードが画像アップロードを実装する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。