完善视频上传

src/api/internal/httpClient.ts

@@ -115,6 +115,19 @@ export class HttpClient {
         });
     });
   }
+
+  request(config: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .request(config)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
 }
 
 const APP_URL = process.env.REACT_APP_URL || "";

src/api/upload.ts

@@ -1,14 +1,7 @@
 import client from "./internal/httpClient";
 
-export function image(categoryId: number, file: File) {
-  return client.post("/backend/v1/upload/image", {
-    category_id: categoryId,
-    file: file,
-  });
-}
-
 export function minioUploadId(extension: string) {
-  return client.get("/backend/v1/upload/minio-upload-id", {
+  return client.get("/backend/v1/upload/minio/upload-id", {
     extension,
   });
 }
@@ -17,16 +10,31 @@ export function minioPreSignUrl(
   filename: string,
   partNumber: number
 ) {
-  return client.get("/backend/v1/upload/minio-pre-sign-url", {
+  return client.get("/backend/v1/upload/minio/pre-sign-url", {
     upload_id: uploadId,
     filename,
     part_number: partNumber,
   });
 }
 
-export function minioMerge(filename: string, uploadId: string) {
+export function minioMergeVideo(
-  return client.get("/backend/v1/upload/minio-merge", {
+  filename: string,
+  uploadId: string,
+  categoryId: number,
+  originalFilename: string,
+  extension: string,
+  size: number,
+  duration: number,
+  poster: string
+) {
+  return client.post("/backend/v1/upload/minio/merge-video", {
     filename,
     upload_id: uploadId,
+    original_filename: originalFilename,
+    category_id: categoryId,
+    size,
+    duration,
+    extension,
+    poster,
   });
 }

src/compenents/upload-image-button/upload-image-sub/index.tsx

@@ -18,7 +18,7 @@ export const UploadImageSub = (props: PropsInterface) => {
     multiple: true,
     action:
       config.app_url +
-      "/backend/v1/upload/image?category_id=" +
+      "/backend/v1/upload/file?category_id=" +
       props.categoryId,
     headers: {
       authorization: "Bearer " + getToken(),

src/compenents/upload-video-button/index.tsx

@@ -13,9 +13,8 @@ import {
 import Dragger from "antd/es/upload/Dragger";
 import { useRef, useState } from "react";
 import { generateUUID, parseVideo } from "../../utils";
-import { minioUploadId } from "../../api/upload";
+import { minioMergeVideo, minioUploadId } from "../../api/upload";
 import { UploadChunk } from "../../js/minio-upload-chunk";
-import { storeResource } from "../../api/resource";
 
 interface PropsInterface {
   categoryId: number;
@@ -24,6 +23,8 @@ interface PropsInterface {
 
 interface FileItem {
   id: string;
+  filename: string;
+  uploadId: string;
   name: string;
   duration: number;
   size: number;
@@ -36,6 +37,7 @@ interface FileItem {
   isErr: boolean;
   errMsg: string;
   remoteName: string;
+  poster: string;
 }
 
 export const UploadVideoButton = (props: PropsInterface) => {
@@ -52,6 +54,7 @@ export const UploadVideoButton = (props: PropsInterface) => {
     multiple: true,
     beforeUpload: async (file: File) => {
       if (file.type === "video/mp4") {
+        // 视频封面解析 || 视频时长解析
         let videoInfo = await parseVideo(file);
         // 添加到本地待上传
         let data = await getMinioUploadId();
@@ -59,6 +62,8 @@ export const UploadVideoButton = (props: PropsInterface) => {
         let item: FileItem = {
           id: generateUUID(),
           duration: videoInfo.duration,
+          filename: data["filename"],
+          uploadId: data["upload_id"],
           name: file.name,
           size: file.size,
           progress: 0,
@@ -70,25 +75,21 @@ export const UploadVideoButton = (props: PropsInterface) => {
           isErr: false,
           errMsg: "",
           remoteName: data["filename"],
+          poster: videoInfo.poster,
         };
-        item.run.on("success", (url: string) => {
+        item.run.on("success", () => {
+          minioMergeVideo(
+            item.filename,
+            item.uploadId,
+            props.categoryId,
+            item.name,
+            "mp4",
+            item.size,
+            item.duration,
+            item.poster
+          ).then(() => {
             item.isSuc = true;
             setFileList([...localFileList.current]);
-
-          // 创建上传记录
-          storeResource(
-            props.categoryId,
-            item.file.name,
-            "mp4",
-            item.file.size,
-            "minio",
-            "",
-            item.remoteName,
-            url,
-            {
-              duration: item.duration,
-            }
-          ).then(() => {
             message.success(`${item.file.name} 上传成功`);
           });
         });

src/js/minio-upload-chunk.ts

@@ -1,5 +1,5 @@
 import axios, { Axios } from "axios";
-import { minioMerge, minioPreSignUrl } from "../api/upload";
+import { minioPreSignUrl } from "../api/upload";
 
 export class UploadChunk {
   client: Axios;
@@ -13,7 +13,7 @@ export class UploadChunk {
   filename: string;
 
   onError: ((err: string) => void | undefined) | undefined;
-  onSuccess: ((url: string) => void | undefined) | undefined;
+  onSuccess: (() => void | undefined) | undefined;
   onRetry: (() => void | undefined) | undefined;
   onProgress: ((progress: number) => void) | undefined;
 
@@ -51,15 +51,7 @@ export class UploadChunk {
     }
     if (this.chunkIndex > this.chunkNumber) {
       //上传完成
-      minioMerge(this.filename, this.uploadId)
+      this.onSuccess && this.onSuccess();
-        .then((res: any) => {
-          let url = res.data.url;
-          this.onSuccess && this.onSuccess(url);
-        })
-        .catch((e) => {
-          console.error("文件合并失败", e);
-          this.onError && this.onError("失败.3");
-        });
       return;
     }
     this.onProgress &&

src/types/index.ts

@@ -1,4 +1,4 @@
 export interface VideoParseInfo {
-    poster:File;
+    poster:string;
     duration:number;
 }

src/utils/index.ts

@@ -65,14 +65,9 @@ export function parseVideo(file: File): Promise<VideoParseInfo> {
       }
       ctx.drawImage(video, 0, 0, width, height); //绘制canvas
       let dataURL = canvas.toDataURL("image/png"); //转换为base64
-      const imageFile = transformBase64ToBlob(
-        dataURL,
-        "image/png",
-        file.name + ".png"
-      );
       video.remove();
       let info: VideoParseInfo = {
-        poster: imageFile,
+        poster: dataURL,
         duration: parseInt(video.duration + ""),
       };
       return resolve(info);