<template>
|
<div class="uploader">
|
<!-- <div class="close" @click="closeHandle">x</div> -->
|
<slot :files="files" :file-list="fileList" :started="started">
|
<uploader-unsupport></uploader-unsupport>
|
<uploader-drop>
|
<!-- <p>拖动文件到该区域上传</p> -->
|
<uploader-btn>选择文件</uploader-btn>
|
<uploader-btn :directory="true">选择文件夹</uploader-btn>
|
</uploader-drop>
|
<uploader-list></uploader-list>
|
</slot>
|
</div>
|
</template>
|
|
<script>
|
import Uploader from 'simple-uploader.js'
|
import { kebabCase } from './common/utils'
|
import UploaderBtn from './btn.vue'
|
import UploaderDrop from './drop.vue'
|
import UploaderUnsupport from './unsupport.vue'
|
import UploaderList from './list.vue'
|
|
const COMPONENT_NAME = 'uploader'
|
const FILE_ADDED_EVENT = 'fileAdded'
|
const FILES_ADDED_EVENT = 'filesAdded'
|
const UPLOAD_START_EVENT = 'uploadStart'
|
|
export default {
|
name: COMPONENT_NAME,
|
provide() {
|
return {
|
uploader: this
|
}
|
},
|
props: {
|
options: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
autoStart: {
|
type: Boolean,
|
default: true
|
},
|
fileStatusText: {
|
type: [Object, Function],
|
default() {
|
return {
|
success: 'success',
|
error: 'error',
|
uploading: 'uploading',
|
paused: 'paused',
|
waiting: 'waiting'
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
started: false,
|
files: [],
|
fileList: []
|
}
|
},
|
methods: {
|
uploadStart() {
|
this.started = true
|
},
|
fileAdded(file) {
|
this.$emit(kebabCase(FILE_ADDED_EVENT), file)
|
if (file.ignored) {
|
// is ignored, filter it
|
return false
|
}
|
},
|
filesAdded(files, fileList) {
|
this.$emit(kebabCase(FILES_ADDED_EVENT), files, fileList)
|
if (files.ignored || fileList.ignored) {
|
// is ignored, filter it
|
return false
|
}
|
},
|
fileRemoved(file) {
|
this.files = this.uploader.files
|
this.fileList = this.uploader.fileList
|
},
|
filesSubmitted(files, fileList) {
|
this.files = this.uploader.files
|
this.fileList = this.uploader.fileList
|
if (this.autoStart) {
|
this.uploader.upload()
|
}
|
},
|
allEvent(...args) {
|
const name = args[0]
|
const EVENTSMAP = {
|
[FILE_ADDED_EVENT]: true,
|
[FILES_ADDED_EVENT]: true,
|
[UPLOAD_START_EVENT]: 'uploadStart'
|
}
|
const handler = EVENTSMAP[name]
|
if (handler) {
|
if (handler === true) {
|
return
|
}
|
this[handler].apply(this, args.slice(1))
|
}
|
args[0] = kebabCase(name)
|
this.$emit.apply(this, args)
|
},
|
closeHandle() {
|
this.$emit("close")
|
}
|
},
|
created() {
|
this.options.initialPaused = !this.autoStart
|
const uploader = new Uploader(this.options)
|
this.uploader = uploader
|
this.uploader.fileStatusText = this.fileStatusText
|
uploader.on('catchAll', this.allEvent)
|
uploader.on(FILE_ADDED_EVENT, this.fileAdded)
|
uploader.on(FILES_ADDED_EVENT, this.filesAdded)
|
uploader.on('fileRemoved', this.fileRemoved)
|
uploader.on('filesSubmitted', this.filesSubmitted)
|
},
|
destroyed() {
|
const uploader = this.uploader
|
uploader.off('catchAll', this.allEvent)
|
uploader.off(FILE_ADDED_EVENT, this.fileAdded)
|
uploader.off(FILES_ADDED_EVENT, this.filesAdded)
|
uploader.off('fileRemoved', this.fileRemoved)
|
uploader.off('filesSubmitted', this.filesSubmitted)
|
this.uploader = null
|
},
|
components: {
|
UploaderBtn,
|
UploaderDrop,
|
UploaderUnsupport,
|
UploaderList
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.uploader {
|
.close {
|
position: absolute;
|
right: 5px;
|
top: 3px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
