<template>
|
<div>
|
<el-upload
|
:action="uploadImgUrl"
|
:data="uploadData"
|
list-type="picture-card"
|
:file-list="fileList"
|
accept=".jpg,.png"
|
:before-upload="beforeUpload"
|
:on-success="uploadSuccess"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-error="fail"
|
>
|
<i class="el-icon-plus icon"></i>
|
</el-upload>
|
<el-image-viewer
|
v-if="showViewer"
|
:on-close="closeViewer"
|
:initialIndex="tempIndex"
|
:url-list="srcList"
|
:z-index="3000"
|
/>
|
</div>
|
|
</template>
|
|
<script>
|
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
|
export default {
|
components: {
|
ElImageViewer
|
},
|
props: {
|
fileList: {
|
type: Array,
|
default: () => []
|
},
|
maxNum: {
|
type: Number,
|
default: () => null
|
},
|
uploadData: Object
|
},
|
data () {
|
return {
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
realList: [],
|
// srcList: [],
|
tempIndex: 0,
|
showViewer: false
|
}
|
},
|
computed:{
|
srcList(){
|
return this.fileList.map(item => { return item.url })
|
}
|
},
|
watch: {
|
},
|
methods: {
|
handlePreview(file) {
|
// console.log('预览文件：', file,this.fileList);
|
this.tempIndex = this.srcList.findIndex(item => item == file.url)
|
this.showViewer = true
|
},
|
beforeUpload (file) {
|
this.$emit('beginUpload')
|
const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
|
const isLt2M = file.size / 1024 / 1024 < 1; // 500kb
|
if (!isJPGOrPNG) {
|
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
|
return false
|
}
|
if (!isLt2M) {
|
this.$message.error('上传头像图片大小不能超过 500KB!');
|
return false
|
}
|
return true
|
},
|
// 上传图片成功
|
uploadSuccess (res, file, fileList) {
|
this.$emit('endUpload')
|
console.log('上传成功1：',fileList);
|
if (res.code === 200) {
|
this.fileList.push({
|
fileurl: res.data.imgaddr,
|
name: res.data.originname,
|
url: res.data.url
|
})
|
console.log('上传成功2：', this.fileList);
|
} else {
|
this.$message.error(res.msg || '上传失败')
|
}
|
},
|
fail (err, file, fileList) {
|
this.$emit('endUpload')
|
this.$message.error('上传失败')
|
},
|
closeViewer () {
|
this.showViewer = false
|
},
|
handleRemove (file) {
|
const tempIndex = this.fileList.findIndex(item => item.url === file.url)
|
if(tempIndex >= 0){
|
this.fileList.splice(tempIndex, 1)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-upload--picture-card{
|
width: 90px !important;
|
height: 90px !important;
|
}
|
::v-deep .el-upload-list__item {
|
width: 90px !important;
|
height: 90px !important;
|
}
|
.icon {
|
-webkit-transform: translate(-50%,-50%);
|
-ms-transform: translate(-50%,-50%);
|
transform: translate(0%, -85%);
|
}
|
::v-deep .el-upload-list__item {
|
width: 90px !important;
|
height: 90px !important;
|
}
|
</style>
|
