Skip to content

L
linshenxs-shop
Commit 0519d9c2 by 陈超
Options

A

parent e2110869
Showing with 193 additions and 109 deletions
src/components/uploader.vue
<template> <template>
<div class="gallery"> <div class="uploader_container">
<div v-for="(file, index) in fileList" :key="index" class="image_holder" :style="picStyle"> <div v-for="(file, index) in fileList" :key="index" class="image_holder" :style="picStyle">
<el-image v-loading="file.status == 'ready'" v-if="showImage(file)" class="image_content" :src="file.url" <el-image v-loading="file.status == 'ready'" v-if="showImage(file)" class="image_content" :src="file.url"
fit="cover"></el-image> fit="cover"></el-image>
...@@ -10,31 +11,30 @@ ...@@ -10,31 +11,30 @@
<div class="image_mask"> <div class="image_mask">
<div class="layout_h_c"> <div class="layout_h_c">
<el-button v-if="showDelete(file)" type="text" icon="el-icon-delete" <el-button v-if="showDelete(file)" type="text" icon="el-icon-delete"
class="dustbin" @click="onDeleteImage(index)"></el-button> class="dustbin" @click="onFileRemove(index)"></el-button>
<el-button v-if="showPlay(file)" type="text" icon="el-icon-video-play" <el-button v-if="showPlay(file)" type="text" icon="el-icon-video-play"
class="dustbin" @click="onPlayVideo(index)"></el-button> class="dustbin" @click="onPlayVideo(index)"></el-button>
</div> </div>
</div> </div>
</div> </div>
<el-upload v-if="showTrigger" class="upload-demo" multiple :action="actionUrl" :show-file-list="false"
:http-request="onUpload" :auto-upload="true" :on-success="onSuccessUpload" :on-exceed="onExceed" <div class="input_container" v-if="showTrigger" :style="picStyle">
:on-change="onFileChanged" :limit="max" :style="picStyle" :file-list="fileList"> <input class="input_el" :accept="accept" :multiple="multiple" :max="maxSelected" type="file" @change.prevent.stop="onChange" />
<div class="plus_loader" slot="trigger" :style="picStyle"> <div class="plus_loader" slot="trigger" :style="picStyle">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</div> </div>
</el-upload> </div>
<core-player :show="showPlayer" :url="nowUrl" @close="showPlayer = false" /> <core-player :show="showPlayer" :url="nowUrl" @close="showPlayer = false" />
<span v-if="tips.default" style="color:#2790e0;white-space: nowrap;">{{tips.content}}</span> <span v-if="tips.default" style="color:#2790e0;white-space: nowrap;">{{tips.content}}</span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
components: {
'core-player': () => import('@/components/player.vue')
},
props: { props: {
tips:{ tips:{
type: Object, type: Object,
...@@ -84,12 +84,15 @@ ...@@ -84,12 +84,15 @@
default: false default: false
} }
}, },
components: {
'core-player': () => import('@/components/player.vue')
},
data() { data() {
return { return {
nowUrl: '', nowUrl: '',
showPlayer: false, showPlayer: false,
lazyLoaded: false, lazyLoaded: false,
fileList: [], fileList: []
} }
}, },
watch: { watch: {
...@@ -113,60 +116,113 @@ ...@@ -113,60 +116,113 @@
this.lazyLoad(n) this.lazyLoad(n)
} }
}, },
methods: { computed: {
lazyLoad(n) { picStyle() {
this.lazyLoaded = true let size = this.size
this.delayInit(n) return {
width: size.width,
height: size.height,
marginRight: "10px"
}
}, },
onUpload(req) { playStyle() {
let f = req.file let size = this.playSize
let bucket = "" return {
if (f.type.startsWith('image') && this.image) { width: size.width,
bucket = 'images' height: size.height
} else if (f.type.startsWith('video') && this.video) {
bucket = 'videos'
} else {
req.onError('不支持的文件格式')
return
} }
this.$oss.upload(bucket, f)
.then(r => {
req.onSuccess(r)
})
.catch(e => {
req.onError(e)
})
}, },
onSuccessUpload(r, f, l) { showTrigger() {
f.url = r.url return this.fileList.length < this.max
}, },
onExceed(f, l) { //是否显示图片
this.$message({ showImage() {
message: '文件数量不能超过' + this.max + "个", return f => {
type: 'warning' return (f.type && f.type.startsWith('image')) || this.isImage(f.url)
}) }
},
//是否显示视频
showVideo() {
return f => {
return (f.type && f.type.startsWith('video')) || this.isVideo(f.url)
}
}, },
onFileChanged(f, l) { //是否显示删除按钮
if (f.status == 'ready') { showDelete() {
f.url = window.URL.createObjectURL(f.raw) return f => {
return f.status == undefined || f.status == 'success'
} }
if(f.status == 'success') { },
this.fileList = l //显示播放按钮
this.$emit('change', this.getList()) showPlay() {
return f => {
return (f.status == undefined || f.status == 'success') && this.isVideo(f.url)
} }
}, },
//删除文件 validCount() {
onDeleteImage(index) { return this.fileList.length
this.fileList.splice(index, 1)
}, },
//播放视频 //原生属性
onPlayVideo(index) { multiple() {
let f = this.fileList[index] return this.max > 1
if(f.url) { },
this.showPlayer = true maxSelected() {
this.nowUrl = f.url return Math.max(0, this.max - this.fileList.length)
},
accept() {
let str = []
if (this.image) {
str.push("image/*")
}
if (this.video) {
str.push("video/*")
}
return str.join(',')
}
},
methods: {
urlList() {
let array = []
for(let value of this.fileList) {
if(value.url) {
array.push(value.url)
}
} }
return array
},
isImage(str) {
if(str == undefined) {
return false
}
let sufix = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff', 'ico']
for (let i = 0; i < sufix.length; i++) {
let sf = sufix[i]
if (str.endsWith(sf)) {
return true
}
}
return false
},
isVideo(str) {
if(str == undefined) {
return false
}
let sufix = ['mp4', 'avi', 'wmv', 'asf', 'rmvb', 'mov', 'm4v', 'mkv', 'flv', 'vob', 'dat', 'rm']
for (let i = 0; i < sufix.length; i++) {
let sf = sufix[i]
if (str.endsWith(sf)) {
return true
}
}
return false
}, },
//对外接口 start
lazyLoad(n) {
this.lazyLoaded = true
this.delayInit(n)
},
delayInit(urls) { delayInit(urls) {
this.$nextTick(() => { this.$nextTick(() => {
this.fileList = urls.split(",").map(url => { this.fileList = urls.split(",").map(url => {
...@@ -177,14 +233,17 @@ ...@@ -177,14 +233,17 @@
}) })
}) })
}, },
initList(list) { initList(list) {
this.fileList = list this.fileList = list
}, },
pushList(list) { pushList(list) {
this.$nextTick(() => { this.$nextTick(() => {
this.fileList = this.fileList.concat(list) this.fileList = this.fileList.concat(list)
}) })
}, },
getList() { getList() {
return this.fileList.filter(r => { return this.fileList.filter(r => {
return r.status == 'success' || r.url return r.status == 'success' || r.url
...@@ -192,74 +251,75 @@ ...@@ -192,74 +251,75 @@
return r.url return r.url
}) })
}, },
isImage(str) {
let sufix = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff', 'ico'] //对外接口 end
for (let i = 0; i < sufix.length; i++) { fileUpload(value, file) {
let sf = sufix[i] if(value && value.status == 'ready' && file) {
if (str.endsWith(sf)) { let bucket = ""
return true if (file.type.startsWith('image') && this.image) {
} bucket = 'images'
} } else if (file.type.startsWith('video') && this.video) {
return false bucket = 'videos'
}, } else {
isVideo(str) { this.onFileUploadError(value)
let sufix = ['mp4', 'avi', 'wmv', 'asf', 'rmvb', 'mov', 'm4v', 'mkv', 'flv', 'vob', 'dat', 'rm'] return
for (let i = 0; i < sufix.length; i++) {
let sf = sufix[i]
if (str.endsWith(sf)) {
return true
}
} }
return false this.$oss.upload(bucket, file)
.then(r => {
this.onFileUploadSuccess(value, r)
})
.catch(e => {
this.onFileUploadError(value)
})
} }
}, },
computed: { onFileRemove(index) {
actionUrl() { this.fileList.splice(index, 1)
return "" this.$emit('change', this.urlList())
}, },
showHolder() { onFileUploadSuccess(value, r) {
return this.fileList.length < this.max value.status = 'success'
value.url = r.url
this.$emit('change', this.urlList())
}, },
picStyle() { onFileUploadError(value) {
let size = this.size let index = -1
return { for(let i = 0; i < this.fileList.length; i++) {
width: size.width, let v = this.fileList[i]
height: size.height, if(v === value) {
marginRight: "10px" index = i
break
} }
},
playStyle() {
let size = this.playSize
return {
width: size.width,
height: size.height
} }
}, if(i >= 0) {
showTrigger() { this.fileList.splice(index, 1)
return this.fileList.length < this.max this.$emit('change', this.urlList())
},
//是否显示图片
showImage() {
return f => {
return (f.type != null && f.type.startsWith('image')) || this.isImage(f.url)
} }
}, },
//是否显示视频
showVideo() { onPlayVideo(index) {
return f => { let f = this.fileList[index]
return (f.type != null && f.type.startsWith('video')) || this.isVideo(f.url) if(f.url) {
this.showPlayer = true
this.nowUrl = f.url
} }
}, },
//是否显示删除按钮
showDelete() { onChange(r) {
return f => { let files = event.target.files
return f.status == undefined || f.status == 'success' if(files && files.length > 0) {
let pick = Math.min(this.maxSelected, files.length)
for(let i = 0; i < pick; i++) {
let f = files[i]
let value = {
name: f.name,
type: f.type,
file: f,
status: 'ready'
}
this.fileList.push(value)
this.fileUpload(value, f)
} }
},
//显示播放按钮
showPlay() {
return f => {
return (f.status == undefined || f.status == 'success') && this.isVideo(f.url)
} }
} }
} }
...@@ -267,6 +327,30 @@ ...@@ -267,6 +327,30 @@
</script> </script>
<style scoped> <style scoped>
.uploader_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.input_container {
position: relative;
}
.input_el:hover, .input_el:focus, .input_el:active {
cursor: pointer;
}
.input_el {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
}
.plus_loader { .plus_loader {
height: 100%; height: 100%;
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment