Jelajahi Sumber

更新 EditVideo 页面

reghao 2 tahun lalu
induk
melakukan
48ae1c53de
1 mengubah file dengan 143 tambahan dan 32 penghapusan
  1. 143 32
      src/components/upload/EditVideo.vue

+ 143 - 32
src/components/upload/EditVideo.vue

@@ -17,20 +17,19 @@
             <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoInfo">更新</el-button>
           </div>
           <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
+            <el-form ref="form" :model="videoInfoForm" label-width="80px">
               <el-form-item label="标题">
-                <el-input v-model="form.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
+                <el-input v-model="videoInfoForm.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
               </el-form-item>
               <el-form-item label="描述">
-                <el-input v-model="form.description" type="textarea" autosize style="padding-right: 1px;" />
+                <el-input v-model="videoInfoForm.description" type="textarea" autosize style="padding-right: 1px;" />
               </el-form-item>
               <el-form-item label="发布时间">
-                <el-col :span="11">
-                  <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
-                </el-col>
-                <el-col :span="11">
-                  <el-time-picker v-model="form.time" placeholder="选择时间" style="width: 100%;" />
-                </el-col>
+                <el-date-picker
+                  v-model="videoInfoForm.pubDate"
+                  type="datetime"
+                  placeholder="选择发布的时间">
+                </el-date-picker>
               </el-form-item>
             </el-form>
           </div>
@@ -125,20 +124,15 @@ export default {
       },
       /***********************************************************************/
       coverUrl: null,
+      coverUrl1: null,
+      videoFileId: null,
       // 提交给后端的数据
-      form: {
-        videoFileId: null,
-        coverUrl: null,
+      videoInfoForm: {
+        videoId: null,
         title: null,
         description: null,
-        categoryId: 0,
-        tags: [],
-        scope: null,
-        width: 0,
-        height: 0,
-        duration: 0
+        pubDate: null
       },
-      videoInfo: null,
       ossToken: null,
     }
   },
@@ -150,19 +144,69 @@ export default {
       if (res.code === 0) {
         const userVideoPost = res.data
         this.coverUrl = userVideoPost.coverUrl
-        this.form.title = userVideoPost.title
-        this.form.description = userVideoPost.description
-        this.form.scope = userVideoPost.scope
+        this.videoInfoForm.videoId = userVideoPost.videoId
+        this.videoInfoForm.title = userVideoPost.title
+        this.videoInfoForm.description = userVideoPost.description
+        this.videoInfoForm.pubDate = userVideoPost.pubDate
       } else {
+        this.$notify({
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          type: 'error',
+          duration: 3000
+        })
+      }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
+    })
 
+    getServerInfo(2).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.options.target = resData.ossUrl
+        this.options.chunkSize = resData.maxSize
+        this.options.headers.Authorization = "Bearer " + resData.token
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          type: 'error',
+          duration: 3000
+        })
       }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
     })
 
-    getServerInfo(1).then(res => {
+    getServerInfo(5).then(res => {
       if (res.code === 0) {
         this.imgHeaders.Authorization = 'Bearer ' + res.data
         this.options.headers.Authorization = 'Bearer ' + res.data
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          type: 'error',
+          duration: 3000
+        })
       }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
     })
   },
   methods: {
@@ -187,7 +231,7 @@ export default {
       const res = JSON.parse(response)
       if (res.code === 0) {
         const resData = res.data
-        this.form.videoFileId = resData.uploadId
+        this.videoFileId = resData.uploadId
 
         this.$notify(
           {
@@ -227,31 +271,98 @@ export default {
         const resData = res.data
         const uploadId = resData.uploadId
         this.coverUrl = resData.url
+        this.coverUrl1 = resData.url
       } else {
       }
     },
     onReturnVideo() {
       this.$router.push('/post/video')
     },
-    onUpdateVideoFile() {
-      updateVideoFile().then(res => {
+    onUpdateVideoInfo() {
+      updateVideoInfo(this.videoInfoForm).then(res => {
         if (res.code === 0) {
-          console.log('更新视频文件')
+          this.$notify({
+            title: '提示',
+            message: '视频信息已更新',
+            type: 'warning',
+            duration: 3000
+          })
         }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
       })
     },
     onUpdateVideoCover() {
-      updateVideoCover().then(res => {
+      if (this.coverUrl1 === null) {
+        this.$notify({
+          title: '提示',
+          message: '你还没有上传视频封面',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      const videoCover = {
+        videoId: this.videoInfoForm.videoId,
+        coverUrl: this.coverUrl1
+      }
+
+      updateVideoCover(videoCover).then(res => {
         if (res.code === 0) {
-          console.log('更新视频封面')
+          this.$notify({
+            title: '提示',
+            message: '视频封面已更新',
+            type: 'warning',
+            duration: 3000
+          })
         }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
       })
     },
-    onUpdateVideoInfo() {
-      updateVideoInfo().then(res => {
+    onUpdateVideoFile() {
+      if (this.videoFileId === null) {
+        this.$notify({
+          title: '提示',
+          message: '你还没有上传视频文件',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      const videoFile = {
+        videoId: this.videoInfoForm.videoId,
+        videoFileId: this.videoFileId
+      }
+
+      updateVideoFile(videoFile).then(res => {
         if (res.code === 0) {
-          console.log('更新视频信息')
+          this.$notify({
+            title: '提示',
+            message: '视频文件已更新',
+            type: 'warning',
+            duration: 3000
+          })
         }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
       })
     },
   }