diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue index 2cb8689..8df0ae1 100644 --- a/src/components/ImageUpload/index.vue +++ b/src/components/ImageUpload/index.vue @@ -1,24 +1,12 @@ @@ -130,9 +124,27 @@ function handleUploadSuccess(res) { number.value = 0 emit('update:modelValue', listToString(fileList.value)) } + updateVideoDom() proxy.$modal.closeLoading() } +function updateVideoDom() { + setTimeout(() => { + Array.prototype.slice.call(document.getElementsByClassName('is-success')) + .filter(item => item.className.indexOf('el-upload-list__item') !== -1) + .map(item => { + let tag = item.getElementsByClassName('el-upload-list__item-thumbnail')[0]; + if (isVideo(tag.getAttribute('src'))) { + let attr = [tag.getAttribute('class'), tag.getAttribute('src')]; + let videoTag = document.createElement('video'); + videoTag.setAttribute('class', attr[0]); + videoTag.setAttribute('src', attr[1]); + item.replaceChild(videoTag, tag); + } + }); + },) +} + // 上传前loading加载 function handleBeforeUpload(file) { let isImg = false @@ -192,6 +204,23 @@ function listToString(list, separator) { } return strs != '' ? strs.substr(0, strs.length - 1) : '' } + +const getFileExtension = (filename) => { + return filename.slice(filename.lastIndexOf('.')); +}; + +const isImage = (value) => { + const imageExtensions = ['.png', '.jpg', '.jpeg']; + const extension = getFileExtension(value); + return imageExtensions.includes(extension.toLowerCase()); +}; + +const isVideo = (value) => { + const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.mkv', '.mpeg', '.3gp', '.webm', '.vob', '.rm', '.rmvb']; + const extension = getFileExtension(value); + return videoExtensions.includes(extension.toLowerCase()); +}; +