knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

File , Blob で、ファイルのエクスポート/ インポート機能とIndexedDB登録, Vue CLI版 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となり。
json ファイルのエクポート、インポートの調査してみました
File API , Blob等で実現できそうでした。

・インポートした jsonファイルを IndexedDB
 登録まで。可能でした

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

参考のコード

github.com

デモのページ

・エクスポート、jsonファイル出力
https://idx-kuc.netlify.app/#/files/test

https://code-kuc.netlify.app/#/files/test
・上記、都合により。URL変更しました

・インポート、 jsonファイル読込
https://idx-kuc.netlify.app/#/files/test2

https://code-kuc.netlify.app/#/files/test2

実装など

json生成、エクスポート
test.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test.vue

            var arr = [
                {id: 1  , name: "n1"},
                {id: 2  , name: "n2"},
                {id: 3  , name: "n3"},
                {id: 4  , name: "n4"},
                {id: 5  , name: "n5"},
            ];
            var content = JSON.stringify( arr );
            var blob = new Blob([ content ], { "type" : "application/json" });

jsonアップロード, db登録
test2.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test2.vue

        change_proc: function(){
            console.log("#-change_proc")
            var self = this
            var files = window.document.getElementById('file1').files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                console.log("i: " + i );                
                console.log("Name: " + file.name);
                console.log("Size: " + file.size);
                console.log("Type: " + file.type);
                console.log("Date: " + file.lastModified);
                console.log("Date: " + file.lastModifiedDate);
                var reader = new FileReader();
                reader.onload = function(evt) {
                    console.log("State: " + evt.target.readyState);
                    console.log("Result: " + evt.target.result);
                    var result =evt.target.result;
                    var dat = JSON.parse(result || '[]')
                    self.add_item(dat)
                    self.items = dat
                    console.log(dat)
                //document.getElementById("output1").innerHTML = evt.target.result;
                };
                reader.onerror = function(evt) {
                    console.log(evt.target.error.name);
                };
                reader.readAsText(file, "utf-8");             
            }            
        },

画面

・ input type=file で、ファイルを指定して。 changeイベントで
 dbインポート処理しています。 

f:id:knaka0209:20200628164311p:plain

参考のページ

knaka0209.hatenablog.com





.