<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" style="font-size: 18px;color: #8c939d;text-align: center;margin-top: 10px"></i>
|
<i style="font-size: 12px;color: #8c939d;font-style: normal;text-align: center">{{tips}}</i>
|
</div>
|
<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: []
|
},
|
tips: {
|
type: String,
|
default: '0'
|
},
|
accept: {
|
type: String,
|
default: ''
|
},
|
folder: {
|
type: String,
|
default: ''
|
}
|
},
|
data () {
|
return {
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/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) {
|
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)
|
console.log(res.data.data)
|
})
|
.catch(e => {
|
})
|
.finally(() => {
|
this.$refs.file.value = null
|
})
|
}
|
},
|
deleItem (index) {
|
this.$emit('dele', index)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.file {
|
/*width: 100%;*/
|
/*height: 90px;*/
|
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: 5px;
|
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;
|
z-index: 10000;
|
cursor: pointer;
|
.el-icon-close {
|
color: #ffffff;
|
font-size: 14px;
|
}
|
}
|
.el-icon-plus {
|
font-size: 30px;
|
color: black;
|
}
|
img {
|
width: 100%;
|
}
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
