对接后端个人信息部分接口
This commit is contained in:
龙运模
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<el-upload
|
||||
:class="{'avatar-img avatar-uploader':imageUrl,'avatar-uploader':!imageUrl,'user-avatar-uploader':upload_type==2}"
|
||||
:action="oss.host"
|
||||
:data="upload_data"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<div v-if="upload_type ==1">
|
||||
<el-image v-if="imageUrl" :src="imageUrl" class="avatar" fit="cover" ></el-image>
|
||||
<div v-else class="avatar-icon">
|
||||
<div class="avatar-uploader-icon"><el-icon-Plus /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userAvatar" v-else>
|
||||
<el-image :src="this.$store.state.global.login_avatar" class="avatar" fit="cover" ></el-image>
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "uploadImg",
|
||||
props:{
|
||||
url:{
|
||||
type:String,
|
||||
default: ""
|
||||
},
|
||||
// type 1 默认的 2 用户头像的
|
||||
type:{
|
||||
type:[String,Number],
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
upload_type:1,
|
||||
imageUrl:'',
|
||||
oss:{
|
||||
host:''
|
||||
},
|
||||
upload_data:{}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
url:{
|
||||
handler(newVal){
|
||||
this.imageUrl = newVal;
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
},
|
||||
type:{
|
||||
handler(newVal) {
|
||||
this.upload_type = newVal;
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 上传前
|
||||
beforeAvatarUpload(file){
|
||||
if(!['image/jpeg','image/png','image/gif'].includes(file.type)){
|
||||
this.$message.warning(`选择的文件类型 ${file.type} 非图像类文件`);
|
||||
return false;
|
||||
}
|
||||
return new Promise((resolve)=>{
|
||||
setTimeout(async ()=>{
|
||||
let params = {
|
||||
dir:"user/images/"
|
||||
}
|
||||
const res = await this.$API.oss.ossGet.post(params);
|
||||
this.oss = res.data;
|
||||
this.upload_data = {
|
||||
name: new Date().getTime() + file.name,
|
||||
key: this.oss.dir +file.name,
|
||||
policy: this.oss.policy,
|
||||
OSSAccessKeyId: this.oss.accessid,
|
||||
success_action_status: "200",
|
||||
callback: this.oss.callback,
|
||||
signature: this.oss.signature,
|
||||
"Cache-Control": this.oss.cache_control,
|
||||
};
|
||||
resolve()
|
||||
},100)
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
// 上传成功
|
||||
handleAvatarSuccess(file){
|
||||
this.imageUrl = file.data.base_url+file.data.filename;
|
||||
this.$emit('parentParams',this.imageUrl);
|
||||
},
|
||||
// 上传失败
|
||||
handleAvatarError(){
|
||||
this.$message.warning('上传失败请重新上传');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-uploader .avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatar-uploader{
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
.user-avatar-uploader{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
.avatar-img{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.avatar-uploader:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.avatar-icon{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.avatar-icon .avatar-uploader-icon {
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.userAvatar{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.avatar{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<el-upload
|
||||
:class="imageList.length>0?'avatar-img avatar-uploader':'avatar-uploader'"
|
||||
:action="oss.host"
|
||||
:data="upload_data"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<div class="imgList">
|
||||
<div class="imgBox" v-for="(item,index) in imageList" :key="index" @click.stop="imgOpen">
|
||||
<el-image :src="item.url?item.url:item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :hide-on-click-modal="true" :preview-teleported="true" :initial-index="index" :preview-src-list="imageList" class="avatar" fit="cover" />
|
||||
<div class="deleteIcon" @click.stop="imgDelete(index)">
|
||||
<div class="iconBox">
|
||||
<div class="iconBtn"><sc-icon-Delete /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-icon" v-if="imageList.length<=num">
|
||||
<div class="avatar-uploader-icon"><el-icon-Plus /></div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "uploadListImg",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
},
|
||||
length:{
|
||||
type:Number,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
imageList:[],
|
||||
num:2,
|
||||
|
||||
oss:{
|
||||
host:''
|
||||
},
|
||||
upload_data:{}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'list':{
|
||||
handler(val){
|
||||
if(val){
|
||||
this.imageList = val;
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
},
|
||||
'length':{
|
||||
handler(val){
|
||||
if(val){
|
||||
this.num = val;
|
||||
}
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 上传前
|
||||
beforeAvatarUpload(file){
|
||||
if(!['image/jpeg','image/png','image/gif'].includes(file.type)){
|
||||
this.$message.warning(`选择的文件类型 ${file.type} 非图像类文件`);
|
||||
return false;
|
||||
}
|
||||
return new Promise((resolve)=>{
|
||||
setTimeout(async ()=>{
|
||||
let params = {
|
||||
dir:"user/images/"
|
||||
}
|
||||
const res = await this.$API.oss.ossGet.post(params);
|
||||
this.oss = res.data;
|
||||
this.upload_data = {
|
||||
name: new Date().getTime() + file.name,
|
||||
key: this.oss.dir +file.name,
|
||||
policy: this.oss.policy,
|
||||
OSSAccessKeyId: this.oss.accessid,
|
||||
success_action_status: "200",
|
||||
callback: this.oss.callback,
|
||||
signature: this.oss.signature,
|
||||
"Cache-Control": this.oss.cache_control,
|
||||
};
|
||||
resolve()
|
||||
},100)
|
||||
})
|
||||
|
||||
},
|
||||
// 上传成功
|
||||
handleAvatarSuccess(file){
|
||||
let imageUrl = file.data.base_url+file.data.filename;
|
||||
this.imageList.push(imageUrl)
|
||||
this.$emit('parentParams',this.imageList);
|
||||
},
|
||||
// 上传失败
|
||||
handleAvatarError(){
|
||||
this.$message.warning('上传失败请重新上传');
|
||||
},
|
||||
imgOpen(){
|
||||
return
|
||||
},
|
||||
imgDelete(num){
|
||||
this.imageList.forEach((item,index)=>{
|
||||
if(index == num){
|
||||
this.imageList.splice(index,1);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-uploader .avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: block;
|
||||
}
|
||||
.avatar-uploader{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
.avatar-img{
|
||||
border: none;
|
||||
}
|
||||
.avatar-uploader:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.imgList{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.imgBox{
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
.avatar{
|
||||
border-radius: 4px;
|
||||
}
|
||||
.deleteIcon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.8);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
.iconBox{
|
||||
width: 32px;
|
||||
padding: 9px 16px;
|
||||
border-radius: 20px;
|
||||
background: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
.iconBtn{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.imgBox:hover .deleteIcon{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.avatar-icon{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.avatar-icon .avatar-uploader-icon {
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user