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.
116 lines
2.7 KiB
116 lines
2.7 KiB
<template>
|
|
<el-upload class="avatar-uploader" ref="upload" :action="fakeaction" :show-file-list="false" :on-change="uploadchangeFile" :http-request="uploadSectionFile">
|
|
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
|
|
<img v-if="Photo" :src="Photo" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script>
|
|
import { imageUpload } from '@/api/Common/Upload.js'
|
|
export default {
|
|
props: {
|
|
tip: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
FrontPhoto: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
Photo: this.FrontPhoto,
|
|
loading: null,
|
|
}
|
|
},
|
|
methods: {
|
|
openFullScreen2() {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
})
|
|
},
|
|
// 上传文件 FrontPhoto
|
|
uploadSectionFile(params) {
|
|
const file = params.file,
|
|
fileType = file.type,
|
|
isImage = fileType.indexOf('image') != -1,
|
|
isLt2M = file.size / 1024 / 1024 < 10
|
|
this.openFullScreen2()
|
|
console.log(params)
|
|
// 这里常规检验，看项目需求而定
|
|
if (!isImage) {
|
|
this.$message.error('只能上传图片格式png、jpg、gif!')
|
|
this.loading.close()
|
|
return
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('只能上传图片大小小于10M')
|
|
this.loading.close()
|
|
return
|
|
}
|
|
// 根据后台需求数据格式
|
|
const form = new FormData()
|
|
console.log(form)
|
|
// 文件对象
|
|
form.append('file', file)
|
|
|
|
// 项目封装的请求方法，下面做简单介绍
|
|
imageUpload(form)
|
|
.then((res) => {
|
|
//自行处理各种情况
|
|
console.log(res)
|
|
this.$emit('imgUrl', res.data)
|
|
this.Photo = res.data.fullUrl
|
|
if (res.code == 200) {
|
|
this.loading.close()
|
|
this.$message({
|
|
message: '上传成功！',
|
|
type: 'success',
|
|
})
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
uploadchangeFile(file) {
|
|
// this.Photo = URL.createObjectURL(file.raw)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.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: 200px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|