You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
3.3 KiB
144 lines
3.3 KiB
<template>
|
|
<div>
|
|
<el-upload ref="imgUpload" class="avatar-uploader" :file-list="files" :headers="accessToken" :accept="accept" :action="uploadFile" :on-success="uploadImgSuccess_FuJian" :show-file-list="false">
|
|
<i v-if="Photo === '' && frontPhoto === ''" class="el-icon-plus avatar-uploader-icon" />
|
|
<img v-else :src="Photo != '' ? Photo : frontPhoto" class="avatar">
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { uploadFile } from '@/api/Common/Upload.js'
|
|
import { getStorage } from '@/utils/auth'
|
|
|
|
export default {
|
|
// model: {
|
|
// prop: 'name',
|
|
// event: 'change'
|
|
// },
|
|
props: {
|
|
limit: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: '.jpg,.jpeg,.png,.JPG,.JPEG,.PNG'
|
|
},
|
|
frontPhoto: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
// 文件名称
|
|
// name: {
|
|
// type: Array,
|
|
// required: true
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
dialogImageUrl: '',
|
|
dialogVisible: false,
|
|
uploadFile: uploadFile,
|
|
files: [],
|
|
loadding: false,
|
|
Photo: ''
|
|
}
|
|
},
|
|
// watch: {
|
|
// name: {
|
|
// deep: true,
|
|
// immediate: true,
|
|
// handler(newVal, oldVal) {
|
|
// console.log('aaaa1', newVal)
|
|
// this.files = newVal
|
|
// if (this.files.length > 1) {
|
|
// this.files.splice(0, 1)
|
|
// console.log(111111)
|
|
// }
|
|
// // this.Photo = this.files[0].url
|
|
// console.log('333333', this.Photo, this.files)
|
|
// console.log('aaaa2', this.files)
|
|
// }
|
|
// }
|
|
// },
|
|
// mounted() {
|
|
// this.$nextTick(() => {
|
|
// this.Init()
|
|
// })
|
|
// },
|
|
created() {
|
|
this.uploadFile = uploadFile // 接口
|
|
this.accessToken = {
|
|
token: getStorage(),
|
|
}
|
|
},
|
|
methods: {
|
|
// showImg(imgList) {
|
|
// this.files = imgList
|
|
// console.log('123123123', this.files)
|
|
// },
|
|
// // 页面第一次加载
|
|
// Init() {
|
|
// if (this.name !== undefined) {
|
|
// this.files = []
|
|
// for (var i = 0; i < this.name.length; i++) {
|
|
// this.files.push({
|
|
// name: this.name[i],
|
|
// url: this.name[i]
|
|
// })
|
|
// }
|
|
// }
|
|
// },
|
|
// 上传方案--成功后执行
|
|
uploadImgSuccess_FuJian(response, file) {
|
|
console.log('您选择的file:', file)
|
|
if (file.response.code === '200') {
|
|
this.loadding = false
|
|
// 返显图片
|
|
this.Photo = file.response.data.fullUrl
|
|
this.files.push({
|
|
name: file.response.data.sourceFileName,
|
|
url: file.response.data.fullUrl,
|
|
size: file.response.data.size
|
|
})
|
|
this.$emit('photoAdd', this.Photo)
|
|
this.$emit('eett', this.files)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
margin-top: 5%;
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|