Merge remote-tracking branch 'origin/master'

src/components/blog.vue

@@ -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
+      const id = this.$store.state.currentUser.id;
-      this.$http.get(`/admin/article/getArticleByUserId?id=${id}`) // 发送GET请求，指定获取用户文章列表的接口地址，并传递当前用户的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: 20px auto;
-  margin-top: 20px;
   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>

src/components/common/uploadPicture.vue

@@ -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();