From 9428cf178530267d9aaa4778df1f9c2fbdc5faa0 Mon Sep 17 00:00:00 2001 From: none Date: Wed, 8 Mar 2023 15:56:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=A7=86=E9=A2=91=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/internal/httpClient.ts | 13 +++++++ src/api/upload.ts | 30 ++++++++++------ .../upload-image-sub/index.tsx | 2 +- src/compenents/upload-video-button/index.tsx | 35 ++++++++++--------- src/js/minio-upload-chunk.ts | 14 ++------ src/types/index.ts | 2 +- src/utils/index.ts | 7 +--- 7 files changed, 56 insertions(+), 47 deletions(-) diff --git a/src/api/internal/httpClient.ts b/src/api/internal/httpClient.ts index 12b91b5..2631bf7 100644 --- a/src/api/internal/httpClient.ts +++ b/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 || ""; diff --git a/src/api/upload.ts b/src/api/upload.ts index 2d8af35..a7efa4c 100644 --- a/src/api/upload.ts +++ b/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) { - return client.get("/backend/v1/upload/minio-merge", { +export function minioMergeVideo( + 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, }); } diff --git a/src/compenents/upload-image-button/upload-image-sub/index.tsx b/src/compenents/upload-image-button/upload-image-sub/index.tsx index 5f3c4b7..b5a8718 100644 --- a/src/compenents/upload-image-button/upload-image-sub/index.tsx +++ b/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(), diff --git a/src/compenents/upload-video-button/index.tsx b/src/compenents/upload-video-button/index.tsx index 3281b0f..42cdc46 100644 --- a/src/compenents/upload-video-button/index.tsx +++ b/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.isSuc = true; - setFileList([...localFileList.current]); - - // 创建上传记录 - storeResource( + item.run.on("success", () => { + minioMergeVideo( + item.filename, + item.uploadId, props.categoryId, - item.file.name, + item.name, "mp4", - item.file.size, - "minio", - "", - item.remoteName, - url, - { - duration: item.duration, - } + item.size, + item.duration, + item.poster ).then(() => { + item.isSuc = true; + setFileList([...localFileList.current]); message.success(`${item.file.name} 上传成功`); }); }); diff --git a/src/js/minio-upload-chunk.ts b/src/js/minio-upload-chunk.ts index b2778e8..8136efd 100644 --- a/src/js/minio-upload-chunk.ts +++ b/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) - .then((res: any) => { - let url = res.data.url; - this.onSuccess && this.onSuccess(url); - }) - .catch((e) => { - console.error("文件合并失败", e); - this.onError && this.onError("失败.3"); - }); + this.onSuccess && this.onSuccess(); return; } this.onProgress && diff --git a/src/types/index.ts b/src/types/index.ts index ee73fc4..7f6dc48 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ export interface VideoParseInfo { - poster:File; + poster:string; duration:number; } \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts index bc50c8f..ab26b3b 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -65,14 +65,9 @@ export function parseVideo(file: File): Promise { } 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);