HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add 用户头像上传

Browse Source
This commit is contained in:
landaiqing
2023-07-07 21:39:51 +08:00
parent 2db7db4aef
commit eaffa1ace3
9 changed files with 399 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/components/User/UserInfoPage.vue
View File

@@ -14,8 +14,8 @@
<el-card class="box-card" style="border: none;">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div style="width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
<el-avatar style="display: flex;align-items: center;justify-content: center" :size="90">{{username}}</el-avatar>
<div @click="changeAvatar" style="cursor: pointer;width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="imageUrl" :size="90"></el-avatar>
</div>
<div style="display: flex;flex-direction: column;margin-left: 15px;">
<div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
@@ -24,17 +24,21 @@
</div>
<span style="display: flex;justify-content:flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> {{userId}} </span>位用户，于 {{creatTime}} 加入。</span>
<span style="display: flex;justify-content: flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">
已分享
分享
<span v-if="projectNum!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{projectNum}}</span>
<span v-if="projectNum==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
个开源项目，
个开源项目,
<span v-if="Object.keys(commentList).length!==0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{Object.keys(commentList).length}}</span>
<span v-if="Object.keys(commentList).length===0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
份项目评价，
份评价,
共获得
<span v-if="contributionValue!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{contributionValue}}</span>
<span v-if="contributionValue==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
点贡献值。
点贡献值.
<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">
{{Object.keys(article).length}}
</span>
篇文章。
</span>
</div>
<el-progress type="circle" :percentage="contributionValue" :width="100" :show-text="true"></el-progress>
@@ -82,16 +86,49 @@
<el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
<span style="font-size: 16px;font-weight: bold">总文章: {{Object.keys(article).length}} 篇</span>
</el-card>
<el-empty v-show="like.length===0" description="暂无点赞" :image-size="115"></el-empty>
<!-- <div v-show="like.length!==0" v-for="(item,index) in like" :key="index">-->
<!-- <UserProjects :project="item" :index="index"></UserProjects>-->
<!-- </div>-->
<el-empty v-show="Object.keys(article).length===0" description="暂无点赞" :image-size="115"></el-empty>
<div v-show="Object.keys(article).length!==0" v-for="(item,index) in article" :key="index">
<UserArticles :article="item"></UserArticles>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</div>
<RightTools></RightTools>
<el-dialog
title="修改头像"
:visible.sync="openChangeAvatar"
width="25vw"
append-to-body
:close-on-click-modal="false"
>
<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
<el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">
<template slot="prepend">url:</template>
</el-input>
<el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: center">
<el-upload
class="upload-demo"
drag
action=""
:http-request="upload"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件。</div>
</el-upload>
<!-- <form action="/upload/UploadHandle" enctype="multipart/form-data" method="post" target="_blank">-->
<!-- <input type="file" name="file1"><br>-->
<!-- <input type="submit" value="上传">-->
<!-- </form>-->
</div>
</el-dialog>
</div>
</template>
@@ -100,10 +137,13 @@ import axios from "axios";
import RightTools from "@/components/Home/RightTools.vue";
import UserProjects from "@/components/User/UserProjects.vue";
import UserComments from "@/components/User/UserComments.vue";
import UserArticles from "@/components/User/UserArticles.vue";
import Vue from "vue";
export default {
name: "UserInfoPage",
components: {UserComments, UserProjects, RightTools},
components: {UserArticles, UserComments, UserProjects, RightTools},
data(){
return{
activeName:'first',
@@ -116,6 +156,9 @@ export default {
commentList:[],
like:[],
article:[],
openChangeAvatar:false,
AvatarUrl:'',
imageUrl:'',
}
},
mounted() {
@@ -130,7 +173,13 @@ export default {
}
}
},
computed: {
headers() {
return {
"Content-Type": "multipart/form-data"
};
},
},
methods: {
goBack() {
window.history.go(-1);
@@ -151,6 +200,7 @@ export default {
that.creatTime=res.data.creatTime;
that.projectNum=res.data.projectNum;
that.userId=res.data.userId;
that.imageUrl=res.data.userAvatar;
});
},
getUserDetail(){
@@ -169,16 +219,125 @@ export default {
that.commentList=JSON.parse(res.data.comment);
that.like=JSON.parse(res.data.like)
that.article=JSON.parse(res.data.article);
console.log(Object.keys(that.article).length);
console.log(that.commentList);
});
},
changeAvatar(){
this.openChangeAvatar=true;
},
changeAvatarByUrl(){
var that=this;
if(this.AvatarUrl!==''){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
// URL 中的查询参数
params: {
url: this.AvatarUrl
}
}).then(function (res) {
if(res.data.code===200){
Vue.prototype.$notify({
title: '上传成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
that.$root.URL=that.imageUrl;
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "上传失败",
offset: 50
});
}
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "请先填写图片链接",
offset: 50
});
}
},
upload(params){
const formData = new FormData();
formData.append("file", params.file);
axios({
method: 'post',
// 请求的地址
url: '/upload/UploadHandle',
headers:{"Content-Type": "multipart/form-data"},
// URL 中的查询参数
data:formData
}).then((res)=>{
console.log(res);
if(res.data.code===200){
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
}
})
},
changeAvatarByLocal(){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/retUserAv',
// URL 中的查询参数
responseType: 'blob',
}).then((res)=>{
console.log(res);
})
},
}
}
</script>
<style scoped>
::v-deep .el-page-header__left{
<style>
.el-page-header__left{
position: relative;
left:-20vw;
}
.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 {
width: 178px;
height: 178px;
display: block;
}
</style>