Merge 95f5f9552c into d48aa62b5e

2024-09-09 14:45:19 +08:00
13 changed files with 75 additions and 365 deletions
--- a/packages/client/next.config.js
+++ b/packages/client/next.config.js
@ -23,7 +23,7 @@ const nextConfig = semi({
  env: {
    SERVER_API_URL: config.client.apiUrl,
    COLLABORATION_API_URL: config.client.collaborationUrl,
-    ENABLE_OSS_S3: config.oss.s3.enable,
+    ENABLE_ALIYUN_OSS: !!config.oss.aliyun.accessKeyId,
    DNS_PREFETCH: (config.client.dnsPrefetch || '').split(' '),
    SEO_APPNAME: config.client.seoAppName,
    SEO_DESCRIPTION: config.client.seoDescription,
--- a/packages/client/src/components/resizeable/resizeable.tsx
+++ b/packages/client/src/components/resizeable/resizeable.tsx
@ -9,8 +9,8 @@ import styles from './style.module.scss';
 type ISize = { width: number; height: number };

 interface IProps {
-  width: number | string;
-  height: number | string;
+  width: number;
+  height: number;
  maxWidth?: number;
  isEditable?: boolean;
  onChange?: (arg: ISize) => void;
--- a/packages/client/src/services/file.ts
+++ b/packages/client/src/services/file.ts
@ -1,11 +1,6 @@
-import { Toast } from '@douyinfe/semi-ui';
-
 import { FILE_CHUNK_SIZE, FileApiDefinition } from '@think/domains';

-import axios from 'axios';
-import { url } from 'inspector';
 import { string } from 'lib0';
-import { timeout } from 'lib0/eventloop';
 import SparkMD5 from 'spark-md5';

 import { HttpClient } from './http-client';
@ -40,6 +35,7 @@ const uploadFileToServer = (arg: {
 }) => {
  const { filename, file, md5, isChunk, chunkIndex, onUploadProgress } = arg;
  const api = isChunk ? 'uploadChunk' : 'upload';
+
  const formData = new FormData();
  formData.append('file', file);

@ -55,7 +51,6 @@ const uploadFileToServer = (arg: {
      md5,
      chunkIndex,
    },
-    timeout: 30 * 1000,
    onUploadProgress: (progress) => {
      const percent = progress.loaded / progress.total;
      onUploadProgress && onUploadProgress(percent);
@ -72,152 +67,68 @@ export const uploadFile = async (
    return onUploadProgress && onUploadProgress(Math.ceil(percent * 100));
  };

-  // 开启s3 文件上传支持
-  if (!process.env.ENABLE_OSS_S3) {
-    const filename = file.name;
-    console.debug('当前没有开启oss 对象存储,使用本地上传方案');
-    if (file.size > FILE_CHUNK_SIZE) {
-      onTooLarge && onTooLarge();
-    }
+  const filename = file.name;

-    if (file.size <= FILE_CHUNK_SIZE) {
-      const spark = new SparkMD5();
-      spark.append(file);
-      spark.append(file.lastModified);
-      spark.append(file.type);
-      const md5 = spark.end();
-      const url = await uploadFileToServer({ filename, file, md5, onUploadProgress: wraponUploadProgress });
-      return url;
-    } else {
-      const { chunks, md5 } = await splitBigFile(file);
-      const unitPercent = 1 / chunks.length;
-      const progressMap = {};
+  if (file.size > FILE_CHUNK_SIZE * 5) {
+    onTooLarge && onTooLarge();
+  }

-      let url = await HttpClient.request<string | undefined>({
-        method: FileApiDefinition.initChunk.method,
-        url: FileApiDefinition.initChunk.client(),
+  if (file.size <= FILE_CHUNK_SIZE) {
+    const spark = new SparkMD5();
+    spark.append(file);
+    spark.append(file.lastModified);
+    spark.append(file.type);
+    const md5 = spark.end();
+    const url = await uploadFileToServer({ filename, file, md5, onUploadProgress: wraponUploadProgress });
+    return url;
+  } else {
+    const { chunks, md5 } = await splitBigFile(file);
+    const unitPercent = 1 / chunks.length;
+    const progressMap = {};
+
+    let url = await HttpClient.request<string | undefined>({
+      method: FileApiDefinition.initChunk.method,
+      url: FileApiDefinition.initChunk.client(),
+      params: {
+        filename,
+        md5,
+      },
+    });
+
+    if (!url) {
+      await Promise.all(
+        chunks.map((chunk, index) => {
+          return uploadFileToServer({
+            filename,
+            file: chunk,
+            chunkIndex: index + 1,
+            md5,
+            isChunk: true,
+            onUploadProgress: (progress) => {
+              progressMap[index] = progress * unitPercent;
+              wraponUploadProgress(
+                Math.min(
+                  Object.keys(progressMap).reduce((a, c) => {
+                    return (a += progressMap[c]);
+                  }, 0),
+                  // 剩下的 5% 交给 merge
+                  0.95
+                )
+              );
+            },
+          });
+        })
+      );
+      url = await HttpClient.request({
+        method: FileApiDefinition.mergeChunk.method,
+        url: FileApiDefinition.mergeChunk.client(),
        params: {
          filename,
          md5,
        },
      });
-
-      if (!url) {
-        await Promise.all(
-          chunks.map((chunk, index) => {
-            return uploadFileToServer({
-              filename,
-              file: chunk,
-              chunkIndex: index + 1,
-              md5,
-              isChunk: true,
-              onUploadProgress: (progress) => {
-                progressMap[index] = progress * unitPercent;
-                wraponUploadProgress(
-                  Math.min(
-                    Object.keys(progressMap).reduce((a, c) => {
-                      return (a += progressMap[c]);
-                    }, 0),
-                    // 剩下的 5% 交给 merge
-                    0.95
-                  )
-                );
-              },
-            });
-          })
-        );
-        url = await HttpClient.request({
-          method: FileApiDefinition.mergeChunk.method,
-          url: FileApiDefinition.mergeChunk.client(),
-          params: {
-            filename,
-            md5,
-          },
-        });
-      }
-      wraponUploadProgress(1);
-      return url;
-    }
-  }
-  // S3 后端签名 前端文件直传 方案
-  else {
-    // 前端计算文件的md5
-    console.log('计算待上传的文件{' + file.name + '}的md5...');
-    const { chunks, md5 } = await splitBigFile(file);
-    console.log('文件{' + file.name + '}的md5:' + md5);
-    const filename = file.name;
-
-    // 请求后端检查指定的文件是不是已经存在
-    const res = await HttpClient.request({
-      method: FileApiDefinition.ossSign.method,
-      url: FileApiDefinition.ossSign.client(),
-      data: { filename, md5, fileSize: file.size },
-    });
-    // 如果后端反应文件已经存在
-    if (res['isExist']) {
-      Toast.info('文件秒传成功!');
-      return res['objectUrl'];
-    } else {
-      //console.log('文件不存在,需要上传文件');
-      // 后端认为文件小,前端直接put 上传
-      if (!res['MultipartUpload']) {
-        console.log('前端直接PUT上传文件');
-        const signUrl = res['signUrl'];
-        await axios.put(signUrl, file, {
-          timeout: 120 * 1000,
-          onUploadProgress: (process) => {
-            const uploadLoaded = process.loaded;
-            const uploadTotal = file.size;
-            const uploadPercent = uploadLoaded / uploadTotal;
-            wraponUploadProgress(uploadPercent);
-          },
-        });
-        const upres = await HttpClient.request({
-          method: FileApiDefinition.ossSign.method,
-          url: FileApiDefinition.ossSign.client(),
-          data: { filename, md5, fileSize: file.size },
-        });
-        return upres['objectUrl'];
-      }
-      // 前端进入分片上传流程
-      else {
-        const upload_id = res['uploadId'];
-        // console.log('分片文件上传,upload_id:' + upload_id);
-        const MultipartUpload = [];
-        for (let index = 0; index < chunks.length; index++) {
-          const chunk = chunks[index];
-          const res = await HttpClient.request({
-            method: FileApiDefinition.ossChunk.method,
-            url: FileApiDefinition.ossChunk.client(),
-            data: { filename, md5, uploadId: upload_id, chunkIndex: index + 1 },
-          });
-          // 上传文件分块到s3
-          // 直接用原生请求不走拦截器
-          const upload_res = await axios.put(res['signUrl'], chunk, {
-            timeout: 120 * 1000,
-            onUploadProgress: (process) => {
-              const uploadLoaded = process.loaded + FILE_CHUNK_SIZE * index;
-              const uploadTotal = file.size;
-              const uploadPercent = uploadLoaded / uploadTotal;
-              //console.log(uploadLoaded, uploadTotal, uploadPercent);
-              wraponUploadProgress(uploadPercent);
-            },
-          });
-          const upload_etag = upload_res.headers['etag'];
-          const response_part = { PartNumber: index + 1, ETag: upload_etag };
-          MultipartUpload.push(response_part);
-          //console.log('文件分片｛' + (index + 1) + '上传成功，etag:' + upload_etag);
-        }
-        // 文件已经全部上传OK
-        // 请求后端合并文件
-        const payload = { filename, md5, uploadId: upload_id, MultipartUpload };
-        const upres = await HttpClient.request({
-          method: FileApiDefinition.ossMerge.method,
-          url: FileApiDefinition.ossMerge.client(),
-          data: payload,
-        });
-        return '' + upres;
-      }
    }
+    wraponUploadProgress(1);
+    return url;
  }
 };
--- a/packages/client/src/services/http-client.ts
+++ b/packages/client/src/services/http-client.ts
@ -39,7 +39,6 @@ HttpClient.interceptors.response.use(
      isBrowser && Toast.error(data.data.message);
      return null;
    }
-    // 如果是 204 请求 那么直接返回 data.headers

    const res = data.data;

--- a/packages/client/src/tiptap/core/wrappers/image/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/image/index.tsx
@ -88,8 +88,9 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
    <NodeViewWrapper style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
      <Resizeable
        className={'render-wrapper'}
-        width="100%"
-        height="100%"
+        width={width || maxWidth}
+        height={height}
+        maxWidth={maxWidth}
        isEditable={isEditable}
        onChangeEnd={onResize}
      >
@ -105,9 +106,11 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
            </Spin>
          </div>
        ) : (
-          <div className={styles.wrap} title="parent_image_div">
+          <div className={styles.wrap}>
            <div
              style={{
+                height: '100%',
+                maxHeight: '100%',
                padding: 24,
                overflow: 'hidden',
                display: 'flex',
@ -117,7 +120,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
                transition: `all ease-in-out .3s`,
              }}
            >
-              <LazyLoadImage src={src} alt={alt} width={'100%'} />
+              <LazyLoadImage src={src} alt={alt} width={'100%'} height={'100%'} />
            </div>

            <div className={styles.handlerWrap}>
--- a/packages/client/src/tiptap/prose-utils/download.ts
+++ b/packages/client/src/tiptap/prose-utils/download.ts
@ -1,6 +1,5 @@
 import FileSaver from 'file-saver';

 export function download(url, name) {
-  if (url.startsWith('http://') || url.startsWith('https://')) window.open(url, '文件下载...');
-  else FileSaver.saveAs(url, name);
+  FileSaver.saveAs(url, name);
 }
--- a/packages/domains/lib/api/file.d.ts
+++ b/packages/domains/lib/api/file.d.ts
@ -1,4 +1,3 @@
-
 export declare const FileApiDefinition: {
    /**
     * 上传文件
@ -32,33 +31,5 @@ export declare const FileApiDefinition: {
        server: "merge/chunk";
        client: () => string;
    };
-
-    /**
-     * 后端签名生成需要上传的文件
-     */
-    ossSign:{
-        method: "post";
-        server: "upload/ossSign";
-        client: () => string;
-    };
-
-    /**
-     * 后端签名上传分片
-     */
-    ossChunk:{
-        method: "post";
-        server: "upload/ossChunk";
-        client: () => string;
-    };
-
-    /**
-     * 后端签名上传结束
-     */
-    ossMerge:{
-        method: "post";
-        server: "upload/ossMerge";
-        client: () => string;
-    };
-    
 };
 export declare const FILE_CHUNK_SIZE: number;
--- a/packages/domains/lib/api/file.js
+++ b/packages/domains/lib/api/file.js
@ -33,22 +33,7 @@ exports.FileApiDefinition = {
        method: 'post',
        server: 'merge/chunk',
        client: function () { return '/file/merge/chunk'; }
-    },
-    ossSign:{
-        method: "post",
-        server: "upload/ossSign",
-        client: function () { return '/file/upload/ossSign'; }
-    },
-    ossChunk:{
-        method: "post",
-        server: "upload/ossChunk",
-        client: function () { return '/file/upload/ossChunk'; }
-    },
-    ossMerge:{
-        method: "post",
-        server: "upload/ossMerge",
-        client: function () { return '/file/upload/ossMerge'; }
-    },
+    }
 };
 // 设置文件分片的大小 改成 8 M 
 // MINIO 等oss 有最小分片的限制
--- a/packages/server/src/controllers/file.controller.ts
+++ b/packages/server/src/controllers/file.controller.ts
@ -1,10 +1,10 @@
-import { Body, Controller, Post, Query, UploadedFile, UseGuards, UseInterceptors } from '@nestjs/common';
+import { Controller, Post, Query, UploadedFile, UseGuards, UseInterceptors } from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';

 import { FILE_CHUNK_SIZE, FileApiDefinition } from '@think/domains';

 import { JwtGuard } from '@guard/jwt.guard';
-import { FileMerge, FileQuery } from '@helpers/file.helper/oss.client';
+import { FileQuery } from '@helpers/file.helper/oss.client';
 import { FileService } from '@services/file.service';

@Controller('file')
@ -64,31 +64,4 @@ export class FileController {
  mergeChunk(@Query() query: FileQuery) {
    return this.fileService.mergeChunk(query);
  }
-
-  /**
-   * 请求后端签名前端直传
-   */
-  @Post(FileApiDefinition.ossSign.server)
-  @UseGuards(JwtGuard)
-  ossSign(@Body() data: FileQuery) {
-    return this.fileService.ossSign(data);
-  }
-
-  /**
-   * 请求后端对分片上传的文件进行签名
-   */
-  @Post(FileApiDefinition.ossChunk.server)
-  @UseGuards(JwtGuard)
-  ossChunk(@Body() data: FileQuery) {
-    return this.fileService.ossChunk(data);
-  }
-
-  /**
-   * 请求后端合并分片上传的文件
-   */
-  @Post(FileApiDefinition.ossMerge.server)
-  @UseGuards(JwtGuard)
-  ossMerge(@Body() data: FileMerge) {
-    return this.fileService.ossMerge(data);
-  }
 }
--- a/packages/server/src/helpers/file.helper/oss.client.ts
+++ b/packages/server/src/helpers/file.helper/oss.client.ts
@ -1,42 +1,11 @@
 import { ConfigService } from '@nestjs/config';

-import exp from 'constants';
 import Redis from 'ioredis';

 export type FileQuery = {
  filename: string;
  md5: string;
  chunkIndex?: number;
-  fileSize?: number;
-  uploadId?: string;
-};
-
-export type FileMerge = {
-  filename: string;
-  md5: string;
-  uploadId: string;
-  MultipartUpload: any;
-};
-
-export type chunkUpload = {
-  uploadId: string;
-  chunkIndex: number;
-  etag: string;
-};
-
-export type ossSignReponse = {
-  MultipartUpload: boolean;
-  isExist: boolean;
-  uploadId: string | null;
-  objectKey: string;
-  objectUrl: string | null;
-  signUrl: string | null;
-};
-
-export type ossChunkResponse = {
-  signUrl: string;
-  uploadId: string;
-  chunkIndex: number;
 };

 export abstract class OssClient {
@ -45,9 +14,6 @@ export abstract class OssClient {
  abstract initChunk(query: FileQuery): Promise<void | string>;
  abstract uploadChunk(file: Express.Multer.File, query: FileQuery): Promise<void>;
  abstract mergeChunk(query: FileQuery): Promise<string>;
-  abstract ossSign(query: FileQuery): Promise<ossSignReponse>;
-  abstract ossChunk(query: FileQuery): Promise<ossChunkResponse>;
-  abstract ossMerge(query: FileMerge): Promise<string>;
 }

 export class BaseOssClient implements OssClient {
@ -77,21 +43,6 @@ export class BaseOssClient implements OssClient {
    throw new Error('Method not implemented.');
  }

-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ossSign(query: FileQuery): Promise<ossSignReponse> {
-    throw new Error('Method not implemented.');
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ossMerge(query: FileMerge): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ossChunk(query: FileQuery): Promise<ossChunkResponse> {
-    throw new Error('Method not implemented.');
-  }
-
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  setRedis(redis: Redis): Promise<void> {
    throw new Error('Method not implemented.');
--- a/packages/server/src/helpers/file.helper/s3.client.ts
+++ b/packages/server/src/helpers/file.helper/s3.client.ts
@ -1,5 +1,3 @@
-import { FILE_CHUNK_SIZE } from '@think/domains';
-
 import {
  CompleteMultipartUploadCommand,
  CreateMultipartUploadCommand,
@ -12,7 +10,7 @@ import {
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import Redis from 'ioredis';

-import { BaseOssClient, FileMerge, FileQuery, ossChunkResponse, ossSignReponse } from './oss.client';
+import { BaseOssClient, FileQuery } from './oss.client';

 export class S3OssClient extends BaseOssClient {
  private client: S3Client | null;
@ -105,6 +103,7 @@ export class S3OssClient extends BaseOssClient {
    this.ensureS3OssClient();
    const command = new GetObjectCommand({ Bucket: bucket, Key: key });
    const signUrl = await getSignedUrl(this.client, command);
+    console.log('signUrl:' + signUrl);
    return signUrl.split('?')[0];
  }

@ -222,6 +221,7 @@ export class S3OssClient extends BaseOssClient {
      const obj = JSON.parse(await this.redis.get('think:oss:chunk:' + md5 + ':' + i));
      MultipartUpload.Parts.push(obj);
    }
+    console.log(MultipartUpload, upload_id);
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.bucket,
      Key: inOssFileName,
@ -234,73 +234,4 @@ export class S3OssClient extends BaseOssClient {
    await this.redis.del('think:oss:chunk:' + md5 + '*');
    return await this.getObjectUrl(this.bucket, inOssFileName);
  }
-
-  async ossSign(query: FileQuery): Promise<ossSignReponse> {
-    const { filename, md5, fileSize } = query;
-    const inOssFileName = await this.getInOssFileName(md5, filename);
-    this.ensureS3OssClient();
-    const objectUrl = await this.checkIfAlreadyInOss(md5, filename);
-    if (objectUrl) {
-      return {
-        signUrl: null,
-        MultipartUpload: false,
-        uploadId: null,
-        objectKey: inOssFileName,
-        isExist: true,
-        objectUrl: objectUrl,
-      };
-    }
-    if (fileSize <= FILE_CHUNK_SIZE) {
-      const command = new PutObjectCommand({ Bucket: this.bucket, Key: inOssFileName });
-      const signUrl = await getSignedUrl(this.client, command);
-      return {
-        signUrl: signUrl,
-        MultipartUpload: false,
-        uploadId: null,
-        objectKey: inOssFileName,
-        isExist: false,
-        objectUrl: null,
-      };
-    } else {
-      const command = new CreateMultipartUploadCommand({ Bucket: this.bucket, Key: inOssFileName });
-      const response = await this.client.send(command);
-      const upload_id = response['UploadId'];
-      return {
-        signUrl: null,
-        MultipartUpload: true,
-        uploadId: upload_id,
-        objectKey: inOssFileName,
-        isExist: false,
-        objectUrl: null,
-      };
-    }
-  }
-
-  async ossChunk(query: FileQuery): Promise<ossChunkResponse> {
-    this.ensureS3OssClient();
-    const { filename, md5 } = query;
-    const inOssFileName = await this.getInOssFileName(md5, filename);
-    const command = new UploadPartCommand({
-      UploadId: query.uploadId,
-      Bucket: this.bucket,
-      Key: inOssFileName,
-      PartNumber: query.chunkIndex,
-    });
-    const signUrl = await getSignedUrl(this.client, command);
-    return { signUrl: signUrl, uploadId: query.uploadId, chunkIndex: query.chunkIndex };
-  }
-
-  async ossMerge(query: FileMerge): Promise<string> {
-    this.ensureS3OssClient();
-    const { filename, md5 } = query;
-    const inOssFileName = await this.getInOssFileName(md5, filename);
-    const command = new CompleteMultipartUploadCommand({
-      Bucket: this.bucket,
-      Key: inOssFileName,
-      UploadId: query.uploadId,
-      MultipartUpload: { Parts: query.MultipartUpload },
-    });
-    await this.client.send(command);
-    return await this.getObjectUrl(this.bucket, inOssFileName);
-  }
 }
--- a/packages/server/src/services/file.service.ts
+++ b/packages/server/src/services/file.service.ts
@ -5,7 +5,7 @@
 * @Blog: https://blog.szhcloud.cn
 * @github: https://github.com/sang8052
 * @LastEditors: SudemQaQ
- * @LastEditTime: 2024-09-10 07:46:50
+ * @LastEditTime: 2024-09-09 12:54:49
 * @Description:
 */
 import { Injectable } from '@nestjs/common';
@ -18,7 +18,6 @@ import Redis from 'ioredis';

@Injectable()
 export class FileService {
-  [x: string]: any;
  private ossClient: OssClient;
  private redis: Redis;

@ -52,16 +51,4 @@ export class FileService {
  async mergeChunk(query) {
    return this.ossClient.mergeChunk(query);
  }
-
-  async ossSign(query) {
-    return this.ossClient.ossSign(query);
-  }
-
-  async ossChunk(query) {
-    return this.ossClient.ossChunk(query);
-  }
-
-  async ossMerge(query) {
-    return this.ossClient.ossMerge(query);
-  }
 }