1. Chat NodeJS + VueJS
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Form Register using Nodejs + Vuejs
  4. Create QR Code in VueJS
  5. Create Template Vuejs and Laravel 5.4
  6. Deploying Vuejs to Heroku
  7. Hướng dẫn kết hợp Nodejs + Vuejs
  8. Read Data From File Using FileReader API in Vuejs
  9. Passing data from Laravel to Vue
  10. Multiple Subcategories in Laravel 5.8 + Vue
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. Transition in VueJS
  14. Sử dụng Routes trong Vuejs
  15. Sử dụng Props trong Vuejs
  16. Sử dụng Axios Get API trong Vuejs
  17. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  18. Shopping list using Vuejs
  19. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  20. Video Create Form Register and Login + Chat Real Time Using Nodejs + Vuejs
  21. Using v-for in VueJS
  22. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs

Read Data From File Using FileReader API in Vuejs

min read

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

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)