<template>
|
<div class="upload">
|
<div class="upload-item" v-for="(item, index) in fileList" :key="index + '_' + item.url">
|
<div class="dele" @click="handleDelete(index)">
|
<i class="el-icon-delete"></i>
|
</div>
|
<el-image
|
fit="widthFix"
|
:preview-src-list="fileList.map(res => res.url)"
|
:src="fileList[index].url"
|
/>
|
</div>
|
<div class="upload-item" @click="handleClick" v-if="fileList.length < maxCount">
|
<i class="el-icon-plus"></i>
|
</div>
|
<input type="file" accept="image/*" ref="fileInput" style="opacity: 0; position: fixed; top: -100%; left: -100%;" @change="handleChangeFile">
|
</div>
|
</template>
|
|
<script>
|
import { upload } from '@/api/system/common'
|
export default {
|
props: {
|
fileList: {
|
type: Array,
|
default: () => []
|
},
|
uploadData: Object,
|
maxCount: {
|
type: Number,
|
default: 1
|
}
|
},
|
data() {
|
return {
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/upload'
|
}
|
},
|
methods: {
|
handleDelete (index) {
|
this.$emit('deleteRow', index)
|
},
|
handleClick () {
|
this.$refs.fileInput.click()
|
},
|
handleChangeFile (e) {
|
let file = e.target.files[0]
|
if (!file) {
|
return
|
}
|
let formData = new FormData()
|
formData.append('file', file)
|
formData.append('folder', this.uploadData.folder)
|
upload(formData)
|
.then(res => {
|
this.$emit('getFileList', {
|
fileurl: res.imgaddr,
|
url: res.url
|
})
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.upload-item {
|
width: 90px;
|
height: 90px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
border: 1px solid #D9D9D9;
|
border-radius: 4px;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
cursor: pointer;
|
position: relative;
|
.dele {
|
position: absolute;
|
top: 0;
|
right: 0;
|
z-index: 10;
|
width: 25px;
|
height: 25px;
|
line-height: 25px;
|
text-align: center;
|
background-color: red;
|
cursor: pointer;
|
.el-icon-delete {
|
font-size: 13px;
|
color: #fff;
|
}
|
}
|
.el-icon-plus {
|
font-size: 24px;
|
color: #909399;
|
}
|
}
|
}
|
</style>
|
