前端上傳文件並且解析(Vue版)

html代碼部分 

<input type="file" ref="upload" accept=".txt" class="file" @change="getTxtList" v-show="false"/>
<el-button size="mini" type="primary" @click="uploadTxt" class="mb20">上傳文件</el-button>

js 代碼部分

  /**
     * 上傳txt文件
     */
    uploadTxt() {
      this.$refs.upload.click()
    },
    /**
     * 上傳txt文件並解析
     */
    getTxtList(event) {
      let fileSelect = event.target.files[0]//找到文件上傳的元素
      let reader = new FileReader()
      if (typeof FileReader === 'undefined') {
        this.$message.error('您的瀏覽器不支持FileReader接口')
        return
      }
      reader.readAsText(fileSelect, ['gb2312', 'utf-8'])
      const _this = this
      reader.onload = function () {
        _this.$nextTick(() => {
            console.log(reader.result, "reader.result");  //文件內容

　　　　　　_this.$refs.upload.value = null;   //要及時清除掉上傳的文件  防止第二次上傳同文件無反應

        })
      }
    }