Nay mình chia sẻ với mọi người cách đọc dữ liệu của một file text load lên website sử dụng bằng Vuejs với FileReader API.

FileReader API là Đối tượng cho phép các ứng dụng web đọc một cách không đồng bộ nội dung của các tệp (hoặc bộ đệm dữ liệu thô) được lưu trữ trên máy tính của người dùng, sử dụng các đối tượng File hoặc Blob để chỉ định tệp hoặc dữ liệu cần đọc.

Đầu tiên các bạn tạo một project vue-cli bằng câu lệnh như sau:

npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev

Sau khi các bạn chạy câu lệnh bên trên các bạn sẽ được project như hình bên dưới đây, gồm có thư mục chứa các components , router và thư mục node_modules chứa các thư viện cần thiết của vue-cli và nhiều file khác nửa nhé!

Giờ chúng ta tạo từng file trong thư mục trong components với các file như sau: (BoxReader.vue,FileReader.vue) bạn có thể đặt tên gì tùy các bạn ,đặt sau hình dung ra là được!

//FileReader.vue

<template>
    <div class="form-group">
        <input type="file" @change="loadTextFromFile" class="btn btn-success">
    </div>
</template>

<script>
export default {
  methods: {
    loadTextFromFile(ev) {
      const file = ev.target.files[0];
      const reader = new FileReader();

      reader.onload = e => this.$emit("load", e.target.result);
      reader.readAsText(file);
    }
  }
};
</script>

Trong file FileReader.vue trên mình có tạo một cái hàm để gọi sự kiện lấy một file lên để đọc , các bạn có thể hiển thị dữ liệu đó qua e.target.result , sẽ show ra tất cả dữ liệu cần thiết

//BoxReader.vue

<template>
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="form-group">
            <label>Content File</label>
            <textarea rows="10" v-model="text" class="form-control"></textarea>
        </div>
     
             <app-reader @load="text = $event"></app-reader>
        
    </div>
    <div class="col-md-2"></div>
</div>
</template>

<script>
import FileReader from "./FileReader";

export default {
  name: "app",
  data: () => ({ text: "" }),
  components: {
    appReader:FileReader
  }
};
</script>

Với đoạn code trên của file BoxReader.vue các bạn xem phần dưới script mình import một component FileReader.vue vể hiển thị tại vị trí <app-reader @load="text=$event"></app-reader>, @load là một sự kiện mà this.$emit đã tạo ra cho thành phần cha có thể gọi và xử lý nó

Nếu các bạn muốn sử dụng bootstrap trong vue-cli thì các bạn cũng cần phải cài đặt bootstrap nửa nhé với câu lệnh dưới đây, sau khi tải xong bạn cần gọi nó trong file main.js 

npm install --save-dev bootstrap-sass node-sass sass-loader

import vào file main.js như sau

require('../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss')

Để chạy được file BoxReader.vue chúng ta cần import nó vào router nằm trong thư mục router của ta như sau:

import Vue from 'vue'
import Router from 'vue-router'

import BoxReader from '@/components/BoxReader'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BoxReader',
      component: BoxReader
    }
  ]
})

và file main.js của chúng ta có cấu trúc như sau:

import Vue from 'vue'
import App from './App'
import router from './router'
require('../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss')
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Vậy là xong giờ các bạn có thể chạy ứng dụng lên bằng câu lệnh: npm run dev

Chúc các bạn làm thành công! hẹn gặp lại mọi người bài chia sẽ tiếp theo