使用方法

导入组件

npm install -S vue2-uploader axios

如果是IE10/IE11+浏览器,需要引入额外的polyfill

npm install -S es6-promise-polyfill

示例代码

<template>
  <div>
    <vue-uploader :multiple="true"
                  url="/file"
                  @change="change"
                  :auto-upload="false">
      <span>可自定义的上传按钮</span>
    </vue-uploader>
    <table>
      <tr v-for="fileItem in files" :key="fileItem.id">
        <td>{{ fileItem.id }}</td>
        <td>{{ fileItem.file.name }}</td>       
        <td>{{ fileItem.progress }}%</td>
        <td><a href="javascript:void(0);" @click="fileItem .cancel()">删除</a></td>
        <td><a href="javascript:void(0);" @click="fileItem .uploadItem()">上传</a></td>
      </tr>
    </table>
  </div>
</template>
<script>
  import 'es6-promise-polyfill' // 如果使用IE10/IE11+浏览器,需要引入polyfill
  import VueUploader from 'vue2-uploader'
  export default {
    components:{
      VueUploader
    },
    data () {
      return {
        files: []
      }
    },
    methods: {
      change (files) {
        this.files = files
      }
    }
  }
</script>

组件提供一个default slot,可以自定义按钮的内容,但组件不提供样式,如果你需要自定义的样式,可以参考src\App.vue中的示例代码

获取实例

我们可以通过指定组件ref来获取组件实例，并调用相关的实例方法。 受支持的实例方法有

• uploadAll()
  将所有任务文件加入上传队列，并启动上传
• cancelAll()
  取消所有队列中的任务，并移除所有任务