ノードが画像アップロードを実装する方法についての簡単な説明-jsチュートリアル-php.cn

ノードが画像アップロードを実装する方法についての簡単な説明

青灯夜游

リリース： 2021-03-05 10:02:51

転載

3847 人が閲覧しました

この記事では、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

ログイン後にコピー

formidable のストリーミングパーサーは、ファイルのアップロードを処理するための優れた選択肢です。つまり、アップロードされるデータのチャンクを受信し、解析し、特定の部分を吐き出すことができます。流れに慣れている人なら簡単に理解できるでしょう。この方法は速いだけでなく、大量のバッファリングが必要なためメモリの拡張が発生せず、ビデオなどの大きなファイルでも処理が圧迫されることはありません。

もちろん、アップロードされた画像を保存するための 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 サイトの他の関連記事を参照してください。

ノードが画像アップロードを実装する方法についての簡単な説明

フロントエンド部分

バックエンド パート

アップロードの進行状況を追加

formidable

バックエンドパート