Skip to content

L
linshenxs-shop
Commit 0519d9c2 by 陈超
Options

A

parent e2110869
Showing with 333 additions and 249 deletions
src/components/uploader.vue
<template>
<div class="gallery">
<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"
fit="cover"></el-image>
<div v-loading="file.status == 'ready'" class="video_holder" v-if="showVideo(file)">
<el-image src="/images/zanting_b.png" :style="playStyle" />
</div>
<div class="image_mask">
<div class="layout_h_c">
<el-button v-if="showDelete(file)" type="text" icon="el-icon-delete"
class="dustbin" @click="onDeleteImage(index)"></el-button>
<el-button v-if="showPlay(file)" type="text" icon="el-icon-video-play"
class="dustbin" @click="onPlayVideo(index)"></el-button>
</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"
:on-change="onFileChanged" :limit="max" :style="picStyle" :file-list="fileList">
<div class="plus_loader" slot="trigger" :style="picStyle">
<i class="el-icon-plus"></i>
</div>
</el-upload>
<div class="uploader_container">
<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"
fit="cover"></el-image>
<div v-loading="file.status == 'ready'" class="video_holder" v-if="showVideo(file)">
<el-image src="/images/zanting_b.png" :style="playStyle" />
</div>
<div class="image_mask">
<div class="layout_h_c">
<el-button v-if="showDelete(file)" type="text" icon="el-icon-delete"
class="dustbin" @click="onFileRemove(index)"></el-button>
<el-button v-if="showPlay(file)" type="text" icon="el-icon-video-play"
class="dustbin" @click="onPlayVideo(index)"></el-button>
</div>
</div>
</div>
<div class="input_container" v-if="showTrigger" :style="picStyle">
<input class="input_el" :accept="accept" :multiple="multiple" :max="maxSelected" type="file" @change.prevent.stop="onChange" />
<div class="plus_loader" slot="trigger" :style="picStyle">
<i class="el-icon-plus"></i>
</div>
</div>
<core-player :show="showPlayer" :url="nowUrl" @close="showPlayer = false" />
<span v-if="tips.default" style="color:#2790e0;white-space: nowrap;">{{tips.content}}</span>
</div>
</div>
</template>
<script>
export default {
components: {
'core-player': () => import('@/components/player.vue')
},
props: {
export default {
props: {
tips:{
type: Object,
default: () => {
......@@ -45,53 +45,56 @@
}
}
},
max: {
type: Number,
default: 1
},
size: {
type: Object,
default: () => {
return {
width: "120px",
height: "160px"
}
}
},
playSize: {
type: Object,
default: () => {
return {
width: '60px',
height: '60px'
}
}
},
urls: {
type: String,
default: ""
},
lazyList: {
type: String,
default: ""
},
image: {
type: Boolean,
default: true
},
video: {
type: Boolean,
default: false
}
max: {
type: Number,
default: 1
},
size: {
type: Object,
default: () => {
return {
width: "120px",
height: "160px"
}
}
},
playSize: {
type: Object,
default: () => {
return {
width: '60px',
height: '60px'
}
}
},
urls: {
type: String,
default: ""
},
lazyList: {
type: String,
default: ""
},
image: {
type: Boolean,
default: true
},
video: {
type: Boolean,
default: false
}
},
components: {
'core-player': () => import('@/components/player.vue')
},
data() {
return {
data() {
return {
nowUrl: '',
showPlayer: false,
lazyLoaded: false,
fileList: [],
}
},
fileList: []
}
},
watch: {
lazyList(n, o) {
if(n && n.length > 0 && !this.lazyLoaded) {
......@@ -113,60 +116,113 @@
this.lazyLoad(n)
}
},
methods: {
lazyLoad(n) {
this.lazyLoaded = true
this.delayInit(n)
computed: {
picStyle() {
let size = this.size
return {
width: size.width,
height: size.height,
marginRight: "10px"
}
},
playStyle() {
let size = this.playSize
return {
width: size.width,
height: size.height
}
},
showTrigger() {
return this.fileList.length < this.max
},
onUpload(req) {
let f = req.file
let bucket = ""
if (f.type.startsWith('image') && this.image) {
bucket = 'images'
} else if (f.type.startsWith('video') && this.video) {
bucket = 'videos'
} else {
req.onError('不支持的文件格式')
return
//是否显示图片
showImage() {
return f => {
return (f.type && f.type.startsWith('image')) || this.isImage(f.url)
}
this.$oss.upload(bucket, f)
.then(r => {
req.onSuccess(r)
})
.catch(e => {
req.onError(e)
})
},
onSuccessUpload(r, f, l) {
f.url = r.url
//是否显示视频
showVideo() {
return f => {
return (f.type && f.type.startsWith('video')) || this.isVideo(f.url)
}
},
onExceed(f, l) {
this.$message({
message: '文件数量不能超过' + this.max + "个",
type: 'warning'
})
//是否显示删除按钮
showDelete() {
return f => {
return f.status == undefined || f.status == 'success'
}
},
onFileChanged(f, l) {
if (f.status == 'ready') {
f.url = window.URL.createObjectURL(f.raw)
//显示播放按钮
showPlay() {
return f => {
return (f.status == undefined || f.status == 'success') && this.isVideo(f.url)
}
if(f.status == 'success') {
this.fileList = l
this.$emit('change', this.getList())
},
validCount() {
return this.fileList.length
},
//原生属性
multiple() {
return this.max > 1
},
maxSelected() {
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
},
//删除文件
onDeleteImage(index) {
this.fileList.splice(index, 1)
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
},
//播放视频
onPlayVideo(index) {
let f = this.fileList[index]
if(f.url) {
this.showPlayer = true
this.nowUrl = f.url
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) {
this.$nextTick(() => {
this.fileList = urls.split(",").map(url => {
......@@ -177,14 +233,17 @@
})
})
},
initList(list) {
this.fileList = list
},
pushList(list) {
this.$nextTick(() => {
this.fileList = this.fileList.concat(list)
})
},
getList() {
return this.fileList.filter(r => {
return r.status == 'success' || r.url
......@@ -192,158 +251,183 @@
return r.url
})
},
isImage(str) {
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) {
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
//对外接口 end
fileUpload(value, file) {
if(value && value.status == 'ready' && file) {
let bucket = ""
if (file.type.startsWith('image') && this.image) {
bucket = 'images'
} else if (file.type.startsWith('video') && this.video) {
bucket = 'videos'
} else {
this.onFileUploadError(value)
return
}
}
return false
}
},
computed: {
actionUrl() {
return ""
},
showHolder() {
return this.fileList.length < this.max
this.$oss.upload(bucket, file)
.then(r => {
this.onFileUploadSuccess(value, r)
})
.catch(e => {
this.onFileUploadError(value)
})
}
},
onFileRemove(index) {
this.fileList.splice(index, 1)
this.$emit('change', this.urlList())
},
picStyle() {
let size = this.size
return {
width: size.width,
height: size.height,
marginRight: "10px"
}
onFileUploadSuccess(value, r) {
value.status = 'success'
value.url = r.url
this.$emit('change', this.urlList())
},
playStyle() {
let size = this.playSize
return {
width: size.width,
height: size.height
}
},
showTrigger() {
return this.fileList.length < this.max
},
//是否显示图片
showImage() {
return f => {
return (f.type != null && f.type.startsWith('image')) || this.isImage(f.url)
onFileUploadError(value) {
let index = -1
for(let i = 0; i < this.fileList.length; i++) {
let v = this.fileList[i]
if(v === value) {
index = i
break
}
}
},
//是否显示视频
showVideo() {
return f => {
return (f.type != null && f.type.startsWith('video')) || this.isVideo(f.url)
if(i >= 0) {
this.fileList.splice(index, 1)
this.$emit('change', this.urlList())
}
},
//是否显示删除按钮
showDelete() {
return f => {
return f.status == undefined || f.status == 'success'
onPlayVideo(index) {
let f = this.fileList[index]
if(f.url) {
this.showPlayer = true
this.nowUrl = f.url
}
},
//显示播放按钮
showPlay() {
return f => {
return (f.status == undefined || f.status == 'success') && this.isVideo(f.url)
}
}
}
}
onChange(r) {
let files = event.target.files
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)
}
}
}
}
}
</script>
<style scoped>
.plus_loader {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-color: #409EFF;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.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 {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-color: #409EFF;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.plus_loader:hover {
border-color: #409EFF;
}
.plus_loader:hover {
border-color: #409EFF;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dustbin {
height: 32px;
width: 32px;
align-self: center;
}
.dustbin {
height: 32px;
width: 32px;
align-self: center;
}
.image_holder {
position: relative;
border-color: #409EFF;
border: 1px dashed #d9d9d9;
border-radius: 6px;
margin-bottom: 6px;
overflow: hidden;
}
.image_holder {
position: relative;
border-color: #409EFF;
border: 1px dashed #d9d9d9;
border-radius: 6px;
margin-bottom: 6px;
overflow: hidden;
}
.image_content {
width: 100%;
height: 100%;
}
.image_content {
width: 100%;
height: 100%;
}
.video_holder {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.video_holder {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.image_mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.65);
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.image_mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.65);
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.image_mask:hover {
animation: fade 0.3s linear;
animation-fill-mode: forwards;
}
.image_mask:hover {
animation: fade 0.3s linear;
animation-fill-mode: forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
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