• 日本語
    • English (英語)
Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • プライベートクラウド
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
  • 採用情報
    • Avintonで働く魅力
    • 新卒採用
    • プロジェクトコーディネーター職紹介
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

CSV import & export – Node.js, mySQL – 2

  • Python3.8 と OpenCV のインストール (Ubuntu20.04LTS)
  • ルーティング
  • postgreSQLへのshp fileのimport
  • NAT
  • PostGIS exercise
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • Docker 概要とセットアップ
  • 三目並べ – 3.勝敗がつくようにしよう
  • Docker Engineのubuntu上へのinstall
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • Apache Zeppelin 基本機能
  • Ruby on Rails を MySQLでセットアップ
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • Scala 基礎
  • VLAN
  • Apache Spark 基礎
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Docker, Kubernetesの学び方について
  • Ubuntuの基本設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • 軽量版Kubernetesディストリビューション – k0s クラスターの構築
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • SparkMLによるKaggle Titanic生存者予測
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • Kubernetesクラスター上へのOpenVINOモデルサーバーを使用したサンプルアプリケーションのデプロイ
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi – VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • Apache NiFiの環境設定
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • CSV import & export – Node.js, mySQL – 2
  • Apache NiFi データパイプライン基礎
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • Apache NiFi Exercise
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Apache SparkとApache Zeppelinの概要と環境構築
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Avintonアカデミー CSV import & export – Node.js, mySQL – 2
node.js
MySQL logo

CSV import & export – Node.js, mySQL #2

CSV import/export

次はテーブルへのcsvファイルのインポートと
テーブルからcsvファイルへのアップロードを行う機能を作成します。

まずexpressappフォルダの中に
uploadedフォルダとtableuploadフォルダを作成します。

今回はSubmitボタンを押すと
・uploadedフォルダにcsvファイルが保存される。
・そのcsvファイルを読み込んでテーブルにインポートする。
・テーブルデータがtableuploadフォルダにタイムスタンプ付きでエクスポートされる。
という流れが一度で起こるようにします。

uploadを補助するmoduleとしてmulterをインストールします。

1
npm install multer

node.jsとmySQLを接続するためにmysqlモジュールをインストールします。

1
npm install mysql

csvuploader.jsを以下のように編集します。

[csvuploader.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var express = require('express');
var multer = require('multer');
var app = express();
const mysql = require('mysql');
 
const connection = mysql.createConnection({
host : ~hostname~
user : ~username~,
password : ~password~,
database: ~databasename~,
});
 
//multerでfileの検索
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '~path~/uploaded')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
});
var upload = multer({ storage: storage });
 
//fileのupload
app.post('/upload', upload.single('upName'), function(req, res){
console.log(req.file.originalname)
console.log(req.file.path)
 
connection.query("~insert MySQL code~;",
function(err, results) {
if(err){
console.log(err);
}
console.log("upload and csv load OK!")
//console.log(results);
}); //query
 
//テーブルをcsvファイルでアウトプット
connection.query("~insert MySQL code~;",
function(err, results) {
if(err){
console.log(err);
}
console.log("outputOK!")
}); //query
res.redirect(302, "http://localhost:8080");
 
app.use('/', express.static('.'));
app.listen(8080);

ターミナルで

1
node csvuploader.js

を実行し http://locaohost:8080
にアクセスし実際にuploadしてみます。
テーブルとtableuploadにそれぞれデータが追加されていることが確認できるはずです。

次にアウトプットされるファイルの名前を(originalname)_(日付).csvとなるようにします。

これは日付を取得するモジュールとsplitを使うと作成できます。
ファイルに

1
require('date-utils');

を追加します。

csvuploader.jsの
//テーブルをcsvファイルでアウトプット

の下の部分に

1
2
3
4
var dt = new Date();
var formatted = dt.toFormat("YYYY_MMDD_HH_MI_SS");
var dotsplit=[];
var dotsplit = req.file.originalname.split(".");

を追加します。

その後dotsplitとformattedを用いてMySQLのcodeを書き換えます。

MySQL workbench内から

1
SELECT @@secure_file_priv;

を入力してみましょう。
valueが /var/lib/mysql-files
のみの場合、直接tableuploadフォルダにロードすることができないため
保存先をmysql-filesに指定しそこからtableuploadフォルダにコピーする必要があります。

コピーに必要なモジュールをインストールします。
fs-extra をインストール

1
npm install fs-extra --save

jsのコードに

1
var fs = require('fs-extra')を追加します。

res.redirect~の下に

1
2
fs.copySync('/var/lib/mysql-files/', '~path~/tableupload/');
})

を追加します。
これでtableupload内にファイルを作成することができるようになりました。

ブラウザ上に表示

次にtableuploadにあるファイルをブラウザに並べ、ダウンロードすることができるようにします。

仕組みはnode.jsでlocalhost/filelistを作りそこにtableuploadフォルダ内のファイル名を取得します。
tableupload内のそれぞれのファイル名を文字的に切り取ることてパスとして使ったりindex.htmlのブラウザに表示したり
することができます。

nodeのコードに以下を追加します。execでシェルのコマンドを実行してfilelistページに
表示することができます。
[csvuploader.js]

1
2
3
4
5
6
7
8
9
10
11
app.get('/filelist',function(req,res){
const exec = require('child_process').exec;
 
exec('ls ~path~/tableupload/', (err, stdout, stderr) => {
if (err) { console.log(err); }
var stdoutajax = '
' + stdout +"
" ;
res.send(stdoutajax);
});
});

保存したらhttp://locaohost:8080
にアクセスし、tableupload内のファイル名が取得されているか確認します。

次に新しくJQueryを用いたjavascriptのファイルを作成します。
htmlget.jsという名前のファイルを作り以下のコードを書きます。
まずはfilelistの文字を取得するためにAJaXを使用します。
文字列はsplitで判別してfor文で回してsparrayに入れます。

[htmlget.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
$.ajax({
 
url : "http://localhost:8080/filelist",
type : "GET",
 
}).done(function(res) {
$("#getspan").html(res);
var sparray=[];
var sparray = $("#ajaxtext").text().split("\n");
for (var i = 0; i < sparray.length - 1; i++) {
$("#outputelement").append("</pre>
<div><input class=""download"" name=""downloadcsv"" type=""submit"" value=""download!"" />" + sparray[i] +"</div>
<pre>" );
}
}
})

次にクリックしたらダウンロードできるようにします。
csvuploader.jsに以下のコードを追加します。

[csvuploader.js] 最上段に追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var url = require('url');
 
下に追加
app.get('/csvoutput',function(req,res){
 
var url_parts = url.parse(req.url,true);
var output = url_parts.query.output;
 
var fileURL = '~path~' + output;
var fileName = output;
 
res.download(fileURL, fileName, function(err){
if (err) {
console.log('error.');
} else {
console.log('ok' );
console.log("filePath:" + fileURL);
console.log("fileName:" + fileName);
}
});//download
}); //get

またhtmlget.js側にも以下を追加します。
[htmlget.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(".download").click(function(){
var params = getParameter();
params['name'] = $(this).next().text();
location.href = "http://localhost:8080/csvoutput?output=" + params['name']
 
function setParameter( paramsArray ) {
var resurl = location.href.replace(/\?.*$/,"");
for ( key in paramsArray ) {
resurl += (resurl.indexOf('?') == -1) ? '?':'&';
resurl += key + '=' + paramsArray[key];
}
return resurl;
}
 
//パラメータを取得する
function getParameter(){
var paramsArray = [];
var url = location.href;
parameters = url.split("#");
if( parameters.length > 1 ) {
url = parameters[0];
}
parameters = url.split("?");
if( parameters.length > 1 ) {
var params = parameters[1].split("&");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
return paramsArray;
};
 
});

htmlget.jsで押されたボタンのファイル名を取得し、node側のcsvoutputにクエリ文字列として送ることができます。
このクエリ文字列を取得してパスに利用することでファイルを特定し、ダウンロードすることができます。

以上で、行うと目的の要件に沿った画面が完成しました。
index.html にアクセスしファイルのアップロードからダウンロードまで
一連の動作を確認してみてください。

採用情報

採用情報

Avinton SDGs

SDGsへの貢献

Search

タグ

AI AI Big Data Big Data ccna Digital Transformation DX IoT LPIC Python Ruby SDGs Webエンジニア イベント インタビュー インフラエンジニア エンジニア オンラインセミナー キャリアチェンジ サーバーエンジニア システム開発 セミナー データサイエンス データサイエンティス データベース データ分析 データ解析 ネットワークエンジニア ビックデータ ボランティア 人工知能 勉強会 営業 就職活動 技術インターン 採用 新卒 新卒採用 新規事業 機械学習 派遣 深層学習 社員インタビュー 経営者交流会 転職
© 2022 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • プライベートクラウド
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
  • 採用情報
    • Avintonで働く魅力
    • 新卒採用
    • プロジェクトコーディネーター職紹介
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ
  • 日本語
    • English (英語)
Avintonジャパン株式会社