<template>
|
<div class="file">
|
<div class="file_list">
|
<div class="file_list_item" :style="{width: width, height: height}" v-for="(item, index) in list" :key="index">
|
<div class="dele" @click="deleItem(index)">
|
<i class="el-icon-close"></i>
|
</div>
|
<img :src="item.url" v-if="fileType(item.url) === 'img'" />
|
<video controls autoplay :src="item.url" v-else></video>
|
</div>
|
<div class="file_list_item" :style="{width: width, height: height, cursor: 'pointer'}" @click="$refs.file.click()">
|
<i class="el-icon-plus"></i>
|
</div>
|
</div>
|
<div style="display: block;">
|
<input type="file" ref="file" :accept="accept" @change="getFile" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
export default {
|
props: {
|
width: {
|
type: String,
|
default: '90px'
|
},
|
height: {
|
type: String,
|
default: '90px'
|
},
|
list: {
|
type: Array,
|
default: []
|
},
|
accept: {
|
type: String,
|
default: ''
|
},
|
folder: {
|
type: String,
|
default: ''
|
}
|
},
|
data () {
|
return {
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
|
}
|
},
|
|
methods: {
|
fileType (url) {
|
if (url.indexOf('.mp4') !== -1) {
|
return 'video'
|
} else {
|
return 'img'
|
}
|
},
|
getFile (e) {
|
if (e.target && e.target.files.length > 0) {
|
const loading = this.$loading({
|
lock: true,
|
text: '上传中，请等待',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
this.$emit('loading')
|
const formdate = new FormData()
|
formdate.append('file', e.target.files[0])
|
formdate.append('folder', this.folder)
|
axios.post(this.uploadImgUrl, formdate)
|
.then(res => {
|
this.$emit('success', res.data.data)
|
})
|
.catch(e => {
|
this.$message.error(e)
|
})
|
.finally(() => {
|
loading.close()
|
this.$refs.file.value = null
|
})
|
}
|
},
|
deleItem (index) {
|
this.$emit('dele', index)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.file {
|
/*width: 100%;*/
|
/*height: 90px;*/
|
padding: 10px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: relative;
|
margin-bottom: 10px;
|
/* margin-right: 20px; */
|
/* margin: 10px 0;*/
|
input {
|
opacity: 0;
|
}
|
.file_list {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.file_list_item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
border-radius: 5px;
|
border: 1px solid #d5d5d5;
|
margin-left: 15px;
|
position: relative;
|
&:first-child {
|
margin: 0 !important;
|
}
|
.dele {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
background: red;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
.el-icon-close {
|
color: #ffffff;
|
font-size: 19px;
|
}
|
}
|
.el-icon-plus {
|
font-size: 30px;
|
color: black;
|
}
|
img {
|
width: 100%;
|
}
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
