概述

基于vue-simple-uploader（vue2），支持分片上传、断点续传。可以全局使用（以EventBus通信）,也可以在组件中单独使用。

安装

npm install ontall-uploader --save

安装依赖包vue-simple-uploader和spark-md5： npm install vue-simple-uploader --save npm install spark-md5 --save

使用

（1）全局使用

main.js中引入组件，同时初始化EventBus：

import OntallUploader from 'ontall-uploader'
Vue.use(OntallUploader)

Vue.prototype.$Bus=new Vue()

使用： 在App.vue中：

<template>
  <div id="app">
    <router-view />
	
	<!-- 将上传组件全局注册 -->
	<OntallUploader :global="true"></OntallUploader>
  </div>
</template>

<script>
	import OntallUploader from '@/components/Uploader'
	
export default {
  name: 'App'
}
</script>

需要上传文件的地方，通过EventBus唤起全局上传组件：

this.$Bus.$emit('openUploader')

（2）单个组件使用

引入组件： import OntallUploader from 'ontall-uploader'

使用：

<OntallUploader :global="false" :options="uploader.options"></OntallUploader>

配置项说明

属性| 类型 | 说明 ---| --- | --- global| Boolean | 是否全局上传，默认true options| Object | 上传配置项，具体参考：vue-simple-uploader文档 input-attrs| Object | input框的属性，比如设置input的accept来确定可上传的文件类型：{ accept:'.jpg' }