npm run dev

var VueFileUpload = require('vue-file-upload');

<template lang="jade">
vue-file-upload(url='upload.do',
  v-bind:files.sync = 'files',
  v-bind:filters = "filters",
  v-bind:on-complete-upload = 'completeUpload')
table
  thead
    tr
      th name
      th size
      th progress
      th status
      th action
  tbody
    tr(v-for='file in files')
      td(v-text='file.name')
      td(v-text='file.size')
      td(v-text='file.progress')
      td(v-text='onStatus(file)')
      td
        button(type='button',@click="uploadItem(file)") 上傳
button(type='button',@click="uploadAll") 上傳所有文件
</template>
<script>
import VueFileUpload from 'vue-file-upload';
export default{
  data(){
    return{
      files:[],
      //文件過濾器，只能上傳圖片
      filters:[
        {
          name:"imageFilter",
          fn(file){
              var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
              return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
          }
        }
      ]
    }
  },
  methods:{
    onStatus(file){
      if(file.isSuccess){
        return "上傳成功";
      }else if(file.isError){
        return "上傳失敗";
      }else if(file.isUploading){
        return "正在上傳";
      }else{
        return "待上傳";
      }
    },
    uploadItem(file){
      //單個文件上傳
      file.upload();
    },
    uploadAll(){
      //上傳所有文件
      this.$broadcast('DO_POST_FILE');
    },
    completeUpload(file,response,status,header){
      console.log("finish upload;")
    }
  },
  components:{
    VueFileUpload
  }
}
</script>