修复本地无法发布视频的bug（上传视频封面失败），新增视频删除按钮（功能依旧没有实现）等等

bobolittlebear · Mar 17, 2019 · 063b3cb · 063b3cb
1 parent d7e9848
commit 063b3cb
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 30 deletions.
diff --git a/server/controller.js b/server/controller.js
@@ -56,10 +56,29 @@ function addUploadFile (router) {
   })
 }
 
+function addUploadCover (router) {
+  const multer = require('koa-multer')
+  let storage = multer.diskStorage({
+    destination: path.join(__dirname, `./static/assets/videoCover/`),
+    filename: function (req, file, cb) {
+      cb(null, req.body.videoId + '.jpg')
+    }
+  })
+  let upload = multer({ storage })
+  router.post('/api/user/uploadCover', upload.single('videoCover'), async (ctx, next) => {
+    if (ctx.req.file) {
+      ctx.body = ctx.req.file
+    } else {
+      ctx.body = 'upload error'
+    }
+  })
+}
+
 module.exports = function (dir) {
   let controllersDir = dir || 'controllers'
   let router = require('koa-router')()
   addControllers(router, controllersDir)
   addUploadFile(router)
+  addUploadCover(router)
   return router.routes()
 }
diff --git a/server/controllers/user.js b/server/controllers/user.js
@@ -183,8 +183,8 @@ module.exports = {
     const userId = ctx.params.userId
     const base64Data = file.replace(/^data:image\/\w+;base64,/, '')
     let dataBuffer = Buffer.from(base64Data, 'base64')
-    let r = fs.writeFileSync(path.join(__dirname, `../static/assets/avatar/${userId}.png`), dataBuffer)
-    ctx.rest(r)
+    fs.writeFileSync(path.join(__dirname, `../static/assets/avatar/${userId}.png`), dataBuffer)
+    ctx.rest('upload avatar suc')
   },
   'POST /api/user/:userId/modifyUserInfo': async (ctx, next) => {
     const user = {
@@ -1310,14 +1310,6 @@ module.exports = {
       throw new APIError('user:not_found', 'user not found by userId.')
     }
   },
-  'POST /api/user/:userId/uploadVideoCover': async (ctx, next) => {
-    const videoId = ctx.request.body.videoId
-    const videoCover = ctx.request.body.videoCover
-    const base64Data = videoCover.replace(/^data:image\/\w+;base64,/, '')
-    let dataBuffer = Buffer.from(base64Data, 'base64')
-    fs.writeFileSync(path.join(__dirname, `../static/assets/videoCover/${videoId}.jpg`), dataBuffer)
-    ctx.rest(videoId)
-  },
   'POST /api/user/:userId/publishVideo': async (ctx, next) => {
     let videoInfo = {
       id: db.generateId(),
@@ -1431,6 +1423,24 @@ module.exports = {
     } else {
       throw new APIError('user:not_existed', 'user not found by id.')
     }
+  },
+  'POST /api/user/:userId/delVideo': async (ctx, next) => {
+    const userId = ctx.params.userId
+    const videoId = ctx.request.body.videoId
+    const user = await UserRegister.findOne({
+      where: {
+        'userId': userId
+      }
+    })
+    if (!user) {
+      throw new APIError('user:not_existed', 'user not found by id.')
+    } else {
+      /**
+       * 删除视频要先删除（先后顺序）所有观看记录，评论点赞记录，评论记录，点赞记录
+       * redis里要删除videoId对应的WSCLNum记录，评论点赞数记录。
+       */
+      ctx.rest(videoId)
+    }
   }
 }
 

diff --git a/server/static/assets/avatar/f5840d3a-f668-4da7-b24d-2d945bb9354d.png b/server/static/assets/avatar/f5840d3a-f668-4da7-b24d-2d945bb9354d.png
diff --git a/src/base/CodeInput/CodeInput.vue b/src/base/CodeInput/CodeInput.vue
@@ -28,11 +28,13 @@ export default {
     },
     getCode () {
       if (this.disabled) return
-      this.$axios.get(`/api/common/user/getCode/${this.email}`).catch((e) => {
+      this.setDisabled(true)
+      this.$axios.get(`/api/common/user/getCode/${this.email}`).then(() => {
+        this.cutdownMethod()
+      }).catch((e) => {
+        this.setDisabled(false)
         this.$emit('code-tip', '验证码发送失败')
       })
-      this.setDisabled(true)
-      this.cutdownMethod()
     },
     inputBlur () {
       window.scroll(0, 0)
@@ -68,6 +70,7 @@ export default {
     border-top-right-radius 0
     border-bottom-right-radius 0
     caret-color $color-point
+    width 150px
     &:focus
       outline none
       border none

diff --git a/src/base/VideoItem/VideoItem.vue b/src/base/VideoItem/VideoItem.vue
@@ -1,13 +1,11 @@
 <template>
   <div>
     <img class="cover" :src="item.Video.videoCover" alt="">
+    <i class="icon iconfont icon-delete" v-if="$route.params.id === 'me'" @click.stop="delVideo"></i>
     <div class="desc">
-        <div v-if="item.type == 1">
-          <i class="icon iconfont icon-delete"></i>本地草稿箱
-        </div>
-        <div v-else>
-          <i class="icon iconfont icon-heart"></i>{{item.WSLCNum.likeNum}}
-        </div>
+      <div>
+        <i class="icon iconfont icon-heart"></i>{{item.WSLCNum.likeNum}}
+      </div>
     </div>
   </div>
 </template>
@@ -19,6 +17,11 @@ export default {
       type: Object,
       required: true
     }
+  },
+  methods: {
+    delVideo () {
+      this.$emit('delVideo', this.item.Video.videoId)
+    }
   }
 }
 </script>
@@ -28,6 +31,12 @@ export default {
 .cover
   height 100%
   width 100%
+.icon-delete
+  position absolute
+  right 5px
+  top 5px
+  font-size $font-size-large
+  padding 0 0 10px 10px
 .desc
   position absolute
   left 5px

diff --git a/src/common/js/config.js b/src/common/js/config.js
@@ -1,3 +1,4 @@
-export const baseURL = 'http://192.168.1.106:3000' // 寝室
+// export const baseURL = 'http://172.20.10.2:3000' // 本地
+export const baseURL = 'http://192.168.1.100:3000' // 寝室
 // export const baseURL = 'http://192.168.200.14:3000' // 公司
 // export const baseURL = 'http://www.zhoubaba.club' // 服务器
diff --git a/src/components/Profile/Profile.vue b/src/components/Profile/Profile.vue
@@ -1,6 +1,10 @@
 <template>
 <div class="profile">
     <tip ref="tip"></tip>
+    <confirm :text="'是否保删除该视频'"
+      @confirm="confirm"
+      @cancel="cancel"
+      ref="confirm"></confirm>
     <me-tab class="fiexedtop"
       :videoNum="videoNum"
       :likeNum="likeNum"
@@ -63,7 +67,8 @@
               @click.native.capture="closeCommentList"
               @showCommentList="fetchCommentsAndShowList"
               :userInfo="userInfo"
-              @chooseVideo="chooseVideo"></router-view>
+              @chooseVideo="chooseVideo"
+              @delVideo="delVideo"></router-view>
           </keep-alive>
         </div>
       </div>
@@ -99,6 +104,7 @@ import MeTab from 'components/MeTab/MeTab'
 import CommentList from 'components/CommentList/CommentList'
 import PlayList from 'components/PlayList/PlayList'
 import ModifyInfomation from 'components/ModifyInfomation/ModifyInfomation'
+import Confirm from 'base/confirm/confirm'
 import { baseURL } from 'common/js/config'
 import { mapGetters, mapMutations } from 'vuex'
 import { deduplicateCommentList } from 'common/js/util'
@@ -222,7 +228,6 @@ export default {
       }
     },
     GoBack () {
-      // let path = localStorage.getItem('Routefrom')
       this.$router.back()
     },
     GoInterestList () {
@@ -234,6 +239,15 @@ export default {
     chooseVideo (index) {
       this.showPlayList = true
       this.$refs.playList.scrollToIndex(index)
+    },
+    delVideo (videoId) {
+      this.$refs.confirm.show()
+    },
+    confirm () {
+      this.$refs.tip.show('暂不支持删除')
+    },
+    cancel () {
+
     },
     triggerFollow (item) {
       if (this.timer) return
@@ -343,7 +357,8 @@ export default {
     MeTab,
     CommentList,
     PlayList,
-    ModifyInfomation
+    ModifyInfomation,
+    Confirm
   }
 }
 </script>

diff --git a/src/components/VideoList/VideoList.vue b/src/components/VideoList/VideoList.vue
@@ -2,6 +2,7 @@
   <div class="video-list">
     <video-item
       @click.native="chooseVideo(index)"
+      @delVideo="delVideo"
       :style="VideoItemHeightStyle"
       class="video-item"
       v-for="(item, index) in list"
@@ -22,6 +23,9 @@ export default {
   methods: {
     chooseVideo (index) {
       this.$emit('chooseVideo', index)
+    },
+    delVideo (videoId) {
+      this.$emit('delVideo', videoId)
     }
   },
   computed: {

diff --git a/src/views/UploadVideo.vue b/src/views/UploadVideo.vue
@@ -2,6 +2,9 @@
 <transition name="right">
   <div class="upload-video-wrap">
     <tip ref="tip"></tip>
+    <div class="loading-wrap" v-show="publishing">
+      <loading></loading>
+    </div>
     <confirm :text="'是否发布动态'"
       @confirm="confirm"
       @cancel="cancel"
@@ -36,6 +39,7 @@
 // https://image.pearvideo.com/cont/20190118/cont-1507651-11802750.jpg
 import MyHeader from 'components/MyHeader/MyHeader'
 import Confirm from 'base/confirm/confirm'
+import Loading from 'base/loading/loading'
 import { baseURL } from 'common/js/config'
 import { regVideoUrl, regCoverUrl } from 'common/js/util'
 import { mapGetters } from 'vuex'
@@ -45,12 +49,14 @@ export default {
     this.videoUrl = ''
     this.videoDesc = ''
     this.coverUrl = ''
+    this.publishing = false
   },
   data () {
     return {
       videoUrl: '',
       videoDesc: '',
-      coverUrl: ''
+      coverUrl: '',
+      publishing: false
     }
   },
   computed: {
@@ -102,6 +108,16 @@ export default {
       }
       return url
     },
+    dataURItoBlob(dataURI) {//图片转成Buffer
+      var byteString = atob(dataURI.split(',')[1]);
+      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+      var ab = new ArrayBuffer(byteString.length);
+      var ia = new Uint8Array(ab);
+      for (var i = 0; i < byteString.length; i++) {
+          ia[i] = byteString.charCodeAt(i);
+      }
+      return new Blob([ab], {type: mimeString});
+    },
     playHandler () {
       if (!this.isLocalVideoFile) {
         if (!regVideoUrl.test(this.videoUrl)) return
@@ -136,6 +152,7 @@ export default {
       }
     },
     async confirm () {
+      this.publishing = true
       if (this.isLocalVideoFile) {
         // 本地上传视频到服务器，记录保存入数据库
         let fd = new FormData()
@@ -144,10 +161,12 @@ export default {
         if (r.status === 200) {
           let filename = r.data.filename
           const videoId = filename.substr(0, filename.indexOf('.'))
-          let r1 = await this.$axios.post(`/api/user/${this.loginInfo.userId}/uploadVideoCover`, {
-            videoId,
-            videoCover: this.coverUrl
-          })
+          let bolb = this.dataURItoBlob(this.coverUrl)
+          let fd1 = new FormData()
+          fd1.append('videoId', videoId)
+          fd1.append('videoCover', bolb)
+          let r1 = await this.$axios.post(`/api/user/uploadCover`, fd1)
+          this.publishing = false
           if (r1.status === 200) {
             // 插入数据库
             let r2 = await this.$axios.post(`/api/user/${this.loginInfo.userId}/publishVideo`, {
@@ -164,6 +183,8 @@ export default {
             } else {
               this.$refs.tip.show('发布失败')
             }
+          } else {
+            this.$refs.tip.show('上传封面失败')
           }
         }
       } else {
@@ -175,6 +196,7 @@ export default {
           videoDesc: this.videoDesc
         }
         let r = await this.$axios.post(`/api/user/${this.loginInfo.userId}/publishVideo`, videoInfo)
+        this.publishing = false
         if (r.status === 200) {
           this.$socket.emit('publishVideo', {
             fromUserId: this.loginInfo.userId
@@ -194,7 +216,8 @@ export default {
   },
   components: {
     MyHeader,
-    Confirm
+    Confirm,
+    Loading
   }
 }
 </script>
@@ -206,6 +229,17 @@ export default {
 .right-enter, .right-leave-to
   opacity 0
   transform translateX(100%)
+.loading-wrap
+  position absolute
+  z-index 10000
+  left 0
+  right 0
+  top 0
+  bottom 0
+  display flex
+  justify-content center
+  align-items center
+  background rgba(0, 0, 0, .7)
 .upload-video-wrap
   position absolute
   z-index 9999

diff --git a/src/views/video.vue b/src/views/video.vue
@@ -4,7 +4,8 @@
     <div v-if="!isLoading">
       <video-list
       :list="list"
-      @chooseVideo="chooseVideo"></video-list>
+      @chooseVideo="chooseVideo"
+      @delVideo="delVideo"></video-list>
       <no-more class="no-more"></no-more>
     </div>
   </div>
@@ -36,6 +37,9 @@ export default {
       this.SET_PLAYLIST(this.list)
       this.$emit('chooseVideo', index)
     },
+    delVideo (videoId) {
+      this.$emit('delVideo', videoId)
+    },
     fetchVideoList () {
       let userId = this.$route.params.id === 'me' ? this.loginInfo.userId : this.$route.params.id
       this.isLoading = true