2020-09-27 12:10:36 +08:00
|
|
|
<template>
|
|
|
|
<div
|
|
|
|
:class="['el-upload', `el-upload--${listType}`]"
|
|
|
|
tabindex="0"
|
|
|
|
@click="handleClick"
|
|
|
|
@keydown.self.enter.space="handleKeydown"
|
|
|
|
>
|
|
|
|
<template v-if="drag">
|
|
|
|
<upload-dragger :disabled="disabled" @file="uploadFiles">
|
|
|
|
<slot></slot>
|
|
|
|
</upload-dragger>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<slot></slot>
|
|
|
|
</template>
|
|
|
|
<input
|
|
|
|
ref="inputRef"
|
|
|
|
class="el-upload__input"
|
|
|
|
type="file"
|
|
|
|
:name="name"
|
|
|
|
:multiple="multiple"
|
|
|
|
:accept="accept"
|
|
|
|
@change="handleChange"
|
2021-09-04 19:29:28 +08:00
|
|
|
/>
|
2020-09-27 12:10:36 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-05-09 10:46:11 +08:00
|
|
|
import { NOOP, hasOwn } from '@vue/shared'
|
2020-09-27 12:10:36 +08:00
|
|
|
|
|
|
|
import ajax from './ajax'
|
|
|
|
import UploadDragger from './upload-dragger.vue'
|
|
|
|
|
|
|
|
import type { PropType } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
import type { Indexable, Nullable } from '@element-plus/utils/types'
|
2020-11-26 23:26:03 +08:00
|
|
|
import type { ListType, UploadFile, ElFile } from './upload.type'
|
2020-09-27 12:10:36 +08:00
|
|
|
|
|
|
|
type IFileHanlder = (
|
|
|
|
file: Nullable<ElFile[]>,
|
2021-09-04 19:29:28 +08:00
|
|
|
fileList?: UploadFile[]
|
2020-09-27 12:10:36 +08:00
|
|
|
) => unknown
|
|
|
|
|
|
|
|
type AjaxEventListener = (e: ProgressEvent, file: ElFile) => unknown
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
components: {
|
|
|
|
UploadDragger,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
action: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
name: {
|
|
|
|
type: String,
|
|
|
|
default: 'file',
|
|
|
|
},
|
|
|
|
data: {
|
|
|
|
type: Object as PropType<Record<string, any>>,
|
|
|
|
default: () => null,
|
|
|
|
},
|
|
|
|
headers: {
|
|
|
|
type: Object as PropType<Nullable<Partial<Headers>>>,
|
|
|
|
default: () => null,
|
|
|
|
},
|
|
|
|
withCredentials: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
multiple: {
|
|
|
|
type: Boolean as PropType<Nullable<boolean>>,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
|
|
|
|
accept: {
|
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
onStart: {
|
|
|
|
type: Function as PropType<(file: File) => void>,
|
|
|
|
default: NOOP as (file: File) => void,
|
|
|
|
},
|
|
|
|
onProgress: {
|
|
|
|
type: Function as PropType<AjaxEventListener>,
|
|
|
|
default: NOOP as AjaxEventListener,
|
|
|
|
},
|
|
|
|
onSuccess: {
|
|
|
|
type: Function as PropType<AjaxEventListener>,
|
|
|
|
default: NOOP as AjaxEventListener,
|
|
|
|
},
|
|
|
|
onError: {
|
|
|
|
type: Function as PropType<AjaxEventListener>,
|
|
|
|
default: NOOP as AjaxEventListener,
|
|
|
|
},
|
|
|
|
beforeUpload: {
|
|
|
|
type: Function as PropType<
|
2021-09-04 19:29:28 +08:00
|
|
|
(file: File) => Promise<File | Blob> | boolean | unknown
|
2020-09-27 12:10:36 +08:00
|
|
|
>,
|
|
|
|
default: NOOP as (file: File) => void,
|
|
|
|
},
|
|
|
|
drag: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
onPreview: {
|
|
|
|
type: Function as PropType<IFileHanlder>,
|
|
|
|
default: NOOP as IFileHanlder,
|
|
|
|
},
|
|
|
|
onRemove: {
|
|
|
|
type: Function as PropType<
|
2021-09-04 19:29:28 +08:00
|
|
|
(file: Nullable<FileList>, rawFile: ElFile) => void
|
2020-09-27 12:10:36 +08:00
|
|
|
>,
|
|
|
|
default: NOOP as (file: Nullable<FileList>, rawFile: ElFile) => void,
|
|
|
|
},
|
|
|
|
fileList: {
|
|
|
|
type: Array as PropType<UploadFile[]>,
|
|
|
|
default: () => [] as UploadFile[],
|
|
|
|
},
|
|
|
|
autoUpload: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
listType: {
|
|
|
|
type: String as PropType<ListType>,
|
|
|
|
default: 'text',
|
|
|
|
},
|
|
|
|
httpRequest: {
|
|
|
|
type: Function as
|
|
|
|
| PropType<typeof ajax>
|
|
|
|
| PropType<(...args: unknown[]) => Promise<unknown>>,
|
|
|
|
default: () => ajax,
|
|
|
|
},
|
|
|
|
disabled: Boolean,
|
|
|
|
limit: {
|
|
|
|
type: Number as PropType<Nullable<number>>,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
onExceed: {
|
|
|
|
type: Function as PropType<
|
2021-09-04 19:29:28 +08:00
|
|
|
(files: FileList, fileList: UploadFile[]) => void
|
2020-09-27 12:10:36 +08:00
|
|
|
>,
|
|
|
|
default: NOOP,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setup(props) {
|
|
|
|
const reqs = ref({} as Indexable<XMLHttpRequest | Promise<any>>)
|
|
|
|
const mouseover = ref(false)
|
|
|
|
const inputRef = ref(null as Nullable<HTMLInputElement>)
|
|
|
|
|
|
|
|
function uploadFiles(files: FileList) {
|
|
|
|
if (props.limit && props.fileList.length + files.length > props.limit) {
|
|
|
|
props.onExceed(files, props.fileList)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let postFiles = Array.from(files)
|
|
|
|
if (!props.multiple) {
|
|
|
|
postFiles = postFiles.slice(0, 1)
|
|
|
|
}
|
|
|
|
if (postFiles.length === 0) {
|
|
|
|
return
|
|
|
|
}
|
2021-09-04 19:29:28 +08:00
|
|
|
postFiles.forEach((rawFile) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
props.onStart(rawFile)
|
|
|
|
if (props.autoUpload) upload(rawFile as ElFile)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function upload(rawFile: ElFile) {
|
|
|
|
inputRef.value.value = null
|
|
|
|
if (!props.beforeUpload) {
|
|
|
|
return post(rawFile)
|
|
|
|
}
|
|
|
|
const before = props.beforeUpload(rawFile)
|
|
|
|
if (before instanceof Promise) {
|
|
|
|
before
|
2021-09-04 19:29:28 +08:00
|
|
|
.then((processedFile) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
const fileType = Object.prototype.toString.call(processedFile)
|
|
|
|
if (fileType === '[object File]' || fileType === '[object Blob]') {
|
|
|
|
if (fileType === '[object Blob]') {
|
|
|
|
processedFile = new File([processedFile], rawFile.name, {
|
|
|
|
type: rawFile.type,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
for (const p in rawFile) {
|
2021-05-09 10:46:11 +08:00
|
|
|
if (hasOwn(rawFile, p)) {
|
2020-09-27 12:10:36 +08:00
|
|
|
processedFile[p] = rawFile[p]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
post(processedFile)
|
|
|
|
} else {
|
|
|
|
post(rawFile)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
props.onRemove(null, rawFile)
|
|
|
|
})
|
|
|
|
} else if (before !== false) {
|
|
|
|
post(rawFile)
|
|
|
|
} else {
|
|
|
|
props.onRemove(null, rawFile)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function abort(file) {
|
|
|
|
const _reqs = reqs.value
|
|
|
|
if (file) {
|
|
|
|
let uid = file
|
|
|
|
if (file.uid) uid = file.uid
|
|
|
|
if (_reqs[uid]) {
|
2021-09-04 19:29:28 +08:00
|
|
|
;(_reqs[uid] as XMLHttpRequest).abort()
|
2020-09-27 12:10:36 +08:00
|
|
|
}
|
|
|
|
} else {
|
2021-09-04 19:29:28 +08:00
|
|
|
Object.keys(_reqs).forEach((uid) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
if (_reqs[uid]) (_reqs[uid] as XMLHttpRequest).abort()
|
|
|
|
delete _reqs[uid]
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function post(rawFile: ElFile) {
|
|
|
|
const { uid } = rawFile
|
|
|
|
const options = {
|
|
|
|
headers: props.headers,
|
|
|
|
withCredentials: props.withCredentials,
|
|
|
|
file: rawFile,
|
|
|
|
data: props.data,
|
|
|
|
filename: props.name,
|
|
|
|
action: props.action,
|
2021-09-04 19:29:28 +08:00
|
|
|
onProgress: (e) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
props.onProgress(e, rawFile)
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
onSuccess: (res) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
props.onSuccess(res, rawFile)
|
|
|
|
delete reqs.value[uid]
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
onError: (err) => {
|
2020-09-27 12:10:36 +08:00
|
|
|
props.onError(err, rawFile)
|
|
|
|
delete reqs.value[uid]
|
|
|
|
},
|
|
|
|
}
|
|
|
|
const req = props.httpRequest(options)
|
|
|
|
reqs.value[uid] = req
|
|
|
|
if (req instanceof Promise) {
|
|
|
|
req.then(options.onSuccess, options.onError)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleChange(e: DragEvent) {
|
|
|
|
const files = (e.target as HTMLInputElement).files
|
|
|
|
if (!files) return
|
|
|
|
uploadFiles(files)
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleClick() {
|
|
|
|
if (!props.disabled) {
|
|
|
|
inputRef.value.value = null
|
|
|
|
inputRef.value.click()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleKeydown() {
|
|
|
|
handleClick()
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
reqs,
|
|
|
|
mouseover,
|
|
|
|
inputRef,
|
|
|
|
abort,
|
|
|
|
post,
|
|
|
|
handleChange,
|
|
|
|
handleClick,
|
|
|
|
handleKeydown,
|
|
|
|
upload,
|
|
|
|
uploadFiles,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
</script>
|