pvelz4hta
/
DDI2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
master
ynmlzdwsp 11 months ago
parent 7322f566f1 38d0a801fd
commit 70677674bc
2 changed files with 182 additions and 23 deletions
Show Stats Download Patch File Download Diff File

200
src/components/blog.vue
Unescape View File

@ -39,10 +39,53 @@
</select>
</div>
<textarea id = "areaContent" class="blog-editor-content" v-model="blogContent" placeholder="请输入博客正文..."></textarea>
<span style="font-size: larger">上传封面：</span><input type="file" @change="handleFileChange()" ref="fileInput" class="pictureUpload"/>
<div style="display: inline-block;margin-top: 17px">
<el-upload
class="upload-demo"
ref="upload"
multiple
drag
:action="$constant.qiniuUrl"
:on-change="handleChange"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove="handleRemove"
:http-request="customUpload"
:list-type="listType"
:accept="accept"
:limit="maxNumber"
:auto-upload="false">
<div class="el-upload__text">
<svg viewBox="0 0 1024 1024" width="40" height="40">
<path
d="M666.2656 629.4528l-113.7664-112.4864c-20.7872-20.5824-54.3232-20.5312-75.1104 0.1024l-113.3056 112.4864c-20.8896 20.736-21.0432 54.528-0.256 75.4688 20.736 20.8896 54.528 21.0432 75.4688 0.256l22.6304-22.4256v189.5936c0 29.44 23.9104 53.3504 53.3504 53.3504s53.3504-23.9104 53.3504-53.3504v-189.5424l22.6816 22.4256a53.1456 53.1456 0 0 0 37.5296 15.4112c13.7728 0 27.4944-5.2736 37.9392-15.8208 20.6336-20.9408 20.4288-54.7328-0.512-75.4688z"
fill="#FFE37B"></path>
<path
d="M820.992 469.504h-5.376c-3.072-163.328-136.3456-294.8096-300.4416-294.8096S217.856 306.1248 214.784 469.504H209.408c-100.7104 0-182.3744 81.664-182.3744 182.3744s81.664 182.3744 182.3744 182.3744h209.7664V761.856c-30.208 5.5808-62.464-3.3792-85.6576-26.7264-37.3248-37.5808-37.0688-98.5088 0.512-135.7824l113.3056-112.4864c37.2224-36.9664 97.8432-37.0176 135.168-0.1536l113.7664 112.4864c18.2272 18.0224 28.3648 42.0864 28.5184 67.7376 0.1536 25.6512-9.728 49.8176-27.7504 68.0448a95.40096 95.40096 0 0 1-68.3008 28.5184c-5.9392 0-11.776-0.512-17.5104-1.5872v72.3456h209.7664c100.7104 0 182.3744-81.664 182.3744-182.3744S921.7024 469.504 820.992 469.504z"
fill="#8C7BFD"></path>
</svg>
<div>拖拽 / 点击上传封面</div>
</div>
<template v-if="listType === 'picture'">
<div slot="tip" class="el-upload__tip">
一次最多上传{{maxNumber}}张图片，且每张图片不超过{{maxSize}}M！
</div>
</template>
<template v-else>
<div slot="tip" class="el-upload__tip">
一次最多上传{{maxNumber}}个文件，且每个文件不超过{{maxSize}}M！
</div>
</template>
</el-upload>
<el-button type="success" style="font-size: 12px" @click="submitUpload">
上传
</el-button>
</div>
<div class="editor-btns">
<button class="cancel-btn" @click="cancelEdit">取消</button>
<button class="publish-btn" @click="saveBlog" v-if="showPublishBtn">发布</button>
<button class="publish-btn" @click="saveBlog" v-if="showPublishBtn" >发布</button>
<button @click="updateBlog" class="publish-btn" v-if="showUpdateBtn">更新</button>
</div>
@ -59,6 +102,9 @@
<div class="author">{{ article.username }}</div>
<div class="title" >{{ article.articleTitle }}</div>
</div>
<div class="blog-card-cover" >
<img :src="'http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/' + article.articleCover" alt="Cover Image" width="100%">
</div>
<div class="blog-card-content" >
{{ article.articleContent }}
</div>
@ -85,6 +131,7 @@
<script>
import axios from "axios";
import * as events from "events";
import upload from '../utils/ajaxUpload';
export default {
avatar: {
type: String
@ -110,7 +157,6 @@ export default {
blogLabelName: "",
articles: [] , // 存储文章列表
labelTotalNum: 0,
articleCover: "",
articleUp: {
id: 1,
articleTitle: "",
@ -119,7 +165,8 @@ export default {
username: "",
sortId: 1,
labelId: 0,
labelName: "研发"
labelName: "研发",
articleCover: ""
},
file:"",
blogLabels:[],
@ -147,6 +194,97 @@ export default {
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
customUpload(options) {
let suffix = "";
if (options.file.name.lastIndexOf('.') !== -1) {
suffix = options.file.name.substring(options.file.name.lastIndexOf('.'));
}
let key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
if (this.storeType === "local") {
let fd = new FormData();
fd.append("file", options.file);
fd.append("key", key);
fd.append("relativePath", key);
fd.append("type", this.prefix);
fd.append("storeType", this.storeType);
this.articleUp.articleCover = fd;
console.log(this.articleUp.articleCover+"fd");
console.log(options.file+"options.file");
return this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, this.isAdmin);
} else if (this.storeType === "qiniu") {
const xhr = new XMLHttpRequest();
xhr.open('get', this.$constant.baseURL + "/qiniu/getUpToken?key=" + key, false);
if (this.isAdmin) {
xhr.setRequestHeader("Authorization", localStorage.getItem("adminToken"));
} else {
xhr.setRequestHeader("Authorization", localStorage.getItem("userToken"));
}
try {
xhr.send();
const res = JSON.parse(xhr.responseText);
if (res !== null && res.hasOwnProperty("code") && res.code === 200) {
options.data = {
token: res.data,
key: key
};
return upload(options);
} else if (res !== null && res.hasOwnProperty("code") && res.code !== 200) {
return Promise.reject(res.message);
} else {
return Promise.reject("服务异常！");
}
} catch (e) {
return Promise.reject(e.message);
}
}
},
// 文件上传成功时的钩子
handleSuccess(response, file, fileList) {
let url;
if (this.storeType === "local") {
url = response.data;
} else if (this.storeType === "qiniu") {
url = this.$constant.qiniuDownload + response.key;
this.$common.saveResource(this, this.prefix, url, file.size, file.raw.type, "qiniu", this.isAdmin);
}
this.$emit("addPicture", url);
},
handleError(err, file, fileList) {
this.$message({
message: err,
type: "error"
});
},
// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUpload(file) {
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
},
// 添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList) {
let flag = false;
if (file.size > this.maxSize * 1024 * 1024) {
this.$message({
message: "图片最大为" + this.maxSize + "M！",
type: "warning"
});
flag = true;
}
if (flag) {
fileList.splice(fileList.size - 1, 1);
}
},
selectSort(sort) {
this.$emit("selectSort", sort);
},
@ -207,21 +345,30 @@ export default {
});
},
getUserArticles() {
const id = this.$store.state.currentUser.id; // 获取当前用户的ID
this.$http.get(`/admin/article/getArticleByUserId?id=${id}`) // 发送GET请求，指定获取用户文章列表的接口地址，并传递当前用户的ID作为参数
const id = this.$store.state.currentUser.id;
this.$http.get(`/admin/article/getArticleByUserId?id=${id}`)
.then(response => {
if (!this.$common.isEmpty(response.data)) {
this.articles = response.data;
const currentUser = this.$store.state.currentUser; // 获取当前用户信息
const currentUser = this.$store.state.currentUser;
this.articles.forEach(article => {
console.log(article.articleCover)
article.username = currentUser.username;
article.labelName = this.blogLabels[article.labelId-1];
console.log(article.labelId+"haha")
});
document.getElementById("totalBlogNum").innerText = this.articles.length;
console.log(response.data);
this.getUserArticleLabelTotalNum();
// 发送请求获取博客封面图
this.$http.get(`http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/${article.articleCover}`)
.then(response => {
console.log(response.data+"star");
// 在这里处理获取到的博客封面图
})
.catch(error => {
console.log(error);
});
});
}
})
.catch(error => {
@ -231,6 +378,7 @@ export default {
});
});
},
showTip() {
this.$router.push({path: '/weiYan'});
},
@ -252,10 +400,10 @@ export default {
// 其他博客相关数据...
sortId:1,
labelId:selectedIndex,
// articleCover:
articleCover:this.articleUp.articleCover
};
console.log(this.$store.state.currentUser)
console.log(this.$store.state.currentUser)
console.log(this.articleUp.articleCover+"cover")
// console.log("index:"+document.getElementById('category').select)
this.$http.post('/article/saveArticle', articleVO)
.then(response => {
@ -501,7 +649,7 @@ export default {
margin: 0 auto;
align-self: center;
width: 80%;
height: 598px;
height: 830px;
background-color: #e7deef;
border-radius: 20px;
margin-top: 20px;
@ -528,7 +676,7 @@ export default {
display: block;
margin: 0 auto;
width: 100%;
height: 386px;
height: 450px;
//resize: none;
//border: none;
//outline: none;
@ -556,7 +704,7 @@ export default {
transition: all .2s linear;
font-size: 19px;
font-weight: bold;
margin-top: 12px;
margin-top: 170px;
}
.cancel-btn {
@ -829,13 +977,12 @@ option {
.blog-card {
width: 31%;
margin-bottom: 20px;
margin-top: 20px;
margin: 20px auto;
background: linear-gradient(to bottom, #f3dcfc, #e5ddff);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 20px;
height: 350px;
height: 550px;
}
@ -849,7 +996,13 @@ option {
align-items: center;
margin-bottom: 10px;
}
.blog-card-cover {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
background-color: #e0d0f3;
}
.author {
font-weight: bold;
font-size: 16px;
@ -869,7 +1022,7 @@ option {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制正文行数 */
-webkit-box-orient: vertical;
height: 74% /* 设置卡片内容的最大高度 */
height: 60% /* 设置卡片内容的最大高度 */
}
.blog-card-content::-webkit-scrollbar {
width: 8px; /* 设置滚动条的宽度 */
@ -926,5 +1079,10 @@ option {
.pictureUpload:hover {
background-color: #b5a9f1; /* 鼠标悬停时修改背景颜色 */
}
.blog-card-cover img {
width: 100%; /* 设置图片宽度为容器宽度 */
height: 100px; /* 设置图片高度为容器高度 */
object-fit: contain;
}
</style>

3
src/components/common/uploadPicture.vue
Unescape View File

@ -114,11 +114,12 @@
if (this.storeType === "local") {
let fd = new FormData();
fd.append("file", options.file);
this.articleUp.articleCover = options.file
fd.append("key", key);
fd.append("relativePath", key);
fd.append("type", this.prefix);
fd.append("storeType", this.storeType);
//上传到服务器
return this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, this.isAdmin);
} else if (this.storeType === "qiniu") {
const xhr = new XMLHttpRequest();

Write Preview
Loading…
Cancel
Save