视频上传

YouBili_front/package.json

@@ -30,6 +30,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   }
 }

YouBili_front/src/components/sidebar.vue

@@ -78,7 +78,7 @@ export default {
   width: 250px;
   overflow-y: auto;
   border: 0;
-  background-image: linear-gradient(#fad7a1, #e96d71);
+  background-image: linear-gradient(#FF9565, #FB2C4C);
 }
 /deep/ #sidebar li ul {
   background-color: transparent !important;

YouBili_front/src/utils/option.js

@@ -332,6 +332,19 @@ export function uploadVideo(params, onUploadProgress) {
     })
 }
 
+// 上传封面
+export function uploadCover(params, onUploadProgress) {
+    return request({
+        method: "post",
+        url: "/video/uploadCover",
+        data: params,
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        },
+        onUploadProgress: onUploadProgress
+    })
+}
+
 // 上传视频信息
 export function uploadContent(params) {
     return request({
@@ -342,6 +355,7 @@ export function uploadContent(params) {
 }
 
 
+
 // 获取视频页所有数量
 export function LikeCount(params) {
     return request({

YouBili_front/src/views/contribute/contribute.vue

@@ -37,19 +37,19 @@
             class="upload-demo"
             action="#"
             list-type="picture-card"
-            :auto-upload="false"
             :multiple="false"
             accept=".jpg"
             :limit="1"
             :on-change="addFile"
             ref="files"
+            :http-request="uploadCoverFile"
         >
 
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{file}">
             <img
                 class="el-upload-list__item-thumbnail"
-                :src="video.videoImgUrl" alt=""
+                :src="videoImgUrl" alt=""
             >
             <span class="el-upload-list__item-actions">
         <span
@@ -78,7 +78,7 @@
         </el-upload>
 
         <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="video.videoImgUrl" alt="">
+          <img width="100%" :src="videoImgUrl" alt="">
         </el-dialog>
       </div>
       <!--   上传封面结束   -->
@@ -143,6 +143,7 @@
 import {
   uploadVideo, // 上传视频
   uploadContent, // 提交视频信息
+  uploadCover, // 上传封面
 } from "@/utils/option"
 export default {
   name: "contribute",
@@ -203,21 +204,95 @@ export default {
       value: '',
       /*视频分类*/
       /*上传封面*/
-      dialogImageUrl: '',
+      // dialogImageUrl: '',
       dialogVisible: false,
       disabled: false,
       /*上传封面*/
+      videoImgUrl: "",
       tags: "",
       input: ''
     }
   },
   methods: {
+    // 上传封面
+    uploadCoverFile(param) {
+      console.log(222)
+      const file = param.file;
+      let form = new FormData();
+      form.append("file", file);
+      uploadCover(form).then(res => {
+        if (res.success) {
+          this.video.videoImgUrl = res.data;
+          console.log(this.video.videoImgUrl)
+        }
+      })
+    },
     // 上传给后台管理视频信息
     uploadInformation() {
       console.log(this.video);
+      if(this.video.title == "") {
+        this.$notify.error({
+          title: '',
+          message: "请输入标题",
+          position: 'bottom-right'
+        });
+        return;
+      }
+      if(this.video.description == "") {
+        this.$notify.error({
+          title: '',
+          message: "请描述内容",
+          position: 'bottom-right'
+        });
+        return;
+      }
+      if(this.video.videoImgUrl == "") {
+        this.$notify.error({
+          title: '',
+          message: "请上传封面",
+          position: 'bottom-right'
+        });
+        return;
+      }
+      if(this.video.videoSrcUrl == "") {
+        this.$notify.error({
+          title: '',
+          message: "请上传视频",
+          position: 'bottom-right'
+        });
+        return;
+      }
+      if(this.video.type == "") {
+        this.$notify.error({
+          title: '',
+          message: "请选择分类",
+          position: 'bottom-right'
+        });
+        return;
+      }
+      if(this.video.videoSrcUrl.length<=0) {
+        this.$notify.error({
+          title: '',
+          message: "请选择标签",
+          position: 'bottom-right'
+        });
+        return;
+      }
+
       uploadContent(this.video).then(res => {
         if (res.success) {
-          alert("成了")
+          this.$notify({
+            title: '',
+            message: "投稿成功，请等待审核",
+            position: 'bottom-right',
+            type: "success"
+          });
+        } else {
+          this.$notify.error({
+            title: '',
+            message: res.message,
+            position: 'bottom-right'
+          });
         }
       })
     },
@@ -235,10 +310,23 @@ export default {
           // }
         }).then(res => {
         if (res.success) {
-          alert("上传成功");
+          // this.$notify({
+          //   title: '上传成功',
+          //   message: res.message,
+          //   position: 'bottom-right',
+          //   type: "success"
+          // });
           console.log(this.progress)
           this.video.userID = res.data.userID;
           this.video.videoSrcUrl = res.data.videoSrcUrl;
+        } else {
+          this.$notify.error({
+            title: '',
+            message: res.message,
+            position: 'bottom-right'
+          });
+
+          location.reload();
         }
       })
     },
@@ -246,15 +334,15 @@ export default {
     // 删除封面
     handleRemove(file) {
       this.$refs.files.handleRemove(file);
-      this.video.videoImgUrl = ""
+      this.videoImgUrl = ""
       // 需要和后端对接进行删除
     },
     addFile(file) {
       // 当上传之后 获取上传的路径
-      this.video.videoImgUrl = file.url;
+      this.videoImgUrl = file.url;
     },
     handlePictureCardPreview(file) {
-      this.video.videoImgUrl = file.url;
+      this.videoImgUrl = file.url;
       this.dialogVisible = true;
     },
     handleDownload(file) {

youbili-project-backend/src/main/java/cn/tedu/youbiliprojectbackend/modules/video/uplaod/controller/VideoUploadController.java

@@ -39,6 +39,7 @@ import java.io.*;
 import java.util.Arrays;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.UUID;
 
 @Slf4j
 @RestController
@@ -59,7 +60,7 @@ public class VideoUploadController {
     //声明一个全局变量用于保存上传进度
     private static double uploadProgress = 0;
 
-
+    // 上传视频
     @PostMapping("/upload")
     public RestBean<Object> uploadVideo(@AuthenticationPrincipal CurrentPrincipal principal,
                                         @RequestParam("file") MultipartFile file) throws EncoderException, IOException {
@@ -67,20 +68,19 @@ public class VideoUploadController {
         // 获取当事人id
         Long id = principal.getUserID();
         log.debug("file{}", file);
-        System.out.println(1111111);
 
         if (file.isEmpty() && file.getOriginalFilename().split("\\.")[1] != "mp4") {
             // 返回请求参数异常
             return RestBean.failure(ServiceCode.ERROR_BAD_REQUEST);
         }
-        String fileName = id + "mp4";
+        UUID randomUUID = UUID.randomUUID();
+        String fileName = randomUUID + "mp4";
         //上传图片
         ApplicationHome applicationHome = new ApplicationHome(this.getClass());
         String pre = applicationHome.getDir().getParentFile().getParentFile().getAbsolutePath() +
                 "\\src\\main\\resources\\videos\\";
         String path = pre + fileName;
         File file1 = new File(path);
-        System.out.println(1111111);
         //获取文件总大小
         long fileSize = file.getSize();
         long uploadedBytes = 0;
@@ -90,7 +90,6 @@ public class VideoUploadController {
 
             byte[] buffer = new byte[1024];
             int bytesRead;
-            System.out.println(1111111);
             while((bytesRead = inputStream.read(buffer)) != -1) {
                 //写入文件
                 outputStream.write(buffer, 0, bytesRead);
@@ -102,7 +101,6 @@ public class VideoUploadController {
                 System.out.println("上传进度: " + uploadProgress + "%");
             }
         }
-        System.out.println(1111111);
         //获取视频信息
         MultimediaObject instance = new MultimediaObject(file1);
         MultimediaInfo result = instance.getInfo();
@@ -120,7 +118,6 @@ public class VideoUploadController {
 
             //创建file对象
             File deleteFile = new File(filePath);
-            System.out.println(222222);
             //检查文件是否存在
             if (deleteFile.exists()) {
                 //调用delete()方法删除文件
@@ -140,6 +137,38 @@ public class VideoUploadController {
         return RestBean.success(map);
     }
 
+    // 上传封面
+    @PostMapping("/uploadCover")
+    public RestBean<Object> uploadFile(@RequestParam("file") MultipartFile file) {
+        System.out.println(11111);
+        String endpoint = "http://oss-cn-beijing.aliyuncs.com";
+        String accessKeyId = "LTAI5tGC4JwEZS3Yfymv5kbA";
+        String accessKeySecret = "j4s9H2eoHFOOcbxrCzlwV7zwTrBB4L";
+        String bucketName = "youbili-image";
+        //创建OSSClient实例
+        System.out.println(22222);
+        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
+
+        try {
+            //上传文件
+            String objectName = file.getOriginalFilename();//上传到OSS后的文件名
+            objectName = UUID.randomUUID()+objectName;
+            ossClient.putObject(bucketName, objectName, file.getInputStream());
+            //返回上传成功的消息
+            log.debug("objectName{}", objectName);
+            return RestBean.success(objectName);
+        } catch (Exception e) {
+            e.printStackTrace();
+            //返回上传失败的消息
+            return RestBean.failure(ServiceCode.ERROR_BAD_REQUEST);
+        } finally {
+            //关闭OSSClient
+            ossClient.shutdown();
+        }
+
+    }
+
+    // 上传信息
     @PostMapping("/uploadContent")
     public RestBean<Object> uploadContent(UploadContentDTO video) {
         log.debug("video{}",video);