獲取本地json或者yaml等文件內容，展現在編輯框

iview框架能夠使用upload組件能夠傳文件，可是沒法讀取文件內容

目先後臺不須要傳文件，只需傳文件內容以字符串形式，能夠使用HTML5中的FileReader對象

<input type="file" class="file" @change="tirggerFile($event)">
<Button @click="readFile">上傳</Button>

上傳以後

tirggerFile: function (event) {
　　　　　　　　　　//此處校驗文件後綴
                var file = event.target.files[0]
                    .name; // (利用console.log輸出看file文件對象) properties/xml/json/conf/config/data/ini/txt/yaml/yml/cfg 
                var num = file.split('.');
                var mun = num[num.length - 1];
                console.log(mun)
                if (mun == 'ini' || mun == 'properties' || mun == 'xml' || mun == 'json' || mun == 'conf' || mun ==
                    'config' ||
                    mun == 'data' || mun == 'txt' || mun == 'config' || mun == 'yaml' || mun == 'cfg') {
                    this.readFile();
                } else {
                    this.$Notice.error({
                        title: '請從新點擊選擇文件傳入符合標準的文件',
                        duration: 2
                    });
                }
            },
            readFile() {
                let self = this;
                let fileselect = document.querySelector('input[type=file]').files[0]; //找到文件上傳的元素        
                let reader = new FileReader()
                // console.log(fileselect);
                if (typeof FileReader === 'undefined') {
                    alert('您的瀏覽器不支持FileReader接口');
                }
                reader.readAsText(fileselect, 'gb2312') //注意讀取中文的是用這個編碼，不是utf-8
                reader.onload = function () {
                    console.log(reader.result);//文件內容
                   
                }
            },

最後將獲取的文件內容賦值到文本編輯框便可