app.use(async (ctx, next) => {
 ctx.set('Access-Control-Allow-Origin', '*');
 ctx.set(
  'Access-Control-Allow-Headers',
  'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
 );
 ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 if (ctx.method == 'OPTIONS') {
  ctx.body = 200;
 } else {
  await next();
 }
});

// 靜態(tài)資源處理
app.use(
 KoaStaticCache('./pulbic', {
  prefix: '/public',
  dynamic: true,
  gzip: true,
 }),
);

const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

 // 上傳配置
const uploadOptions = {
// 支持文件格式
 multipart: true,
 formidable: {
  // 上傳目錄 這邊直接上傳到public文件夾，方便訪問 文件夾后面要記得加/
  uploadDir: path.join(__dirname, '../../pulbic/'),
  // 保留文件擴(kuò)展名
  keepExtensions: true,
 },
};
router.post('/upload', new KoaBody(uploadOptions), (ctx, next) => {
 // 獲取上傳的文件
 const file = ctx.request.files.file;
 const fileName = file.path.split('/')[file.path.split('/').length-1];
 ctx.body = {
   code:0,
   data:{
    url:`public/${fileName}`
   },
   message:'success'

 }
});

   const Upload = () => {
   const [url, setUrl] = useState<string>('')
   const handleClickUpload = () => {
     const fileLoader = document.querySelector('#btnFile') as HTMLInputElement;
     if (isNil(fileLoader)) {
       return;
     }
     fileLoader.click();
   }
   const handleUpload = async (e: any) => {
     //獲取上傳文件
     const file = e.target.files[0];
     const formData = new FormData()
     formData.append('file', file);
     // 上傳文件
     const { data } = await uploadSmallFile(formData);
     console.log(data.url);
     setUrl(`${baseURL}${data.url}`);
   }
   return (
     <div>
       <input type="file" id="btnFile" onChange={handleUpload} style={{ display: 'none' }} />
       <Button onClick={handleClickUpload}>上傳小文件</Button>
       <img src={url} />
     </div>
   )
 }

  const handleUploadLarge = async (e: any) => {
     //獲取上傳文件
     const file = e.target.files[0];
     // 對(duì)于文件分片
     await uploadEveryChunk(file, 0);
   }
   const uploadEveryChunk = (
     file: File,
     index: number,
   ) => {
     console.log(index);
     const chunkSize = 512; // 分片寬度
     // [ 文件名, 文件后綴 ]
     const [fname, fext] = file.name.split('.');
     // 獲取當(dāng)前片的起始字節(jié)
     const start = index * chunkSize;
     if (start > file.size) {
       // 當(dāng)超出文件大小，停止遞歸上傳
       return mergeLargeFile(file.name);
     }
     const blob = file.slice(start, start + chunkSize);
     // 為每片進(jìn)行命名
     const blobName = `${fname}.${index}.${fext}`;
     const blobFile = new File([blob], blobName);
     const formData = new FormData();
     formData.append('file', blobFile);
     uploadLargeFile(formData).then((res) => {
       // 遞歸分片上傳
       uploadEveryChunk(file, ++index);
     });
   };

const uploadStencilPreviewOptions = {
multipart: true,
formidable: {
 uploadDir: path.resolve(__dirname, '../../temp/'), // 文件存放地址
 keepExtensions: true,
 maxFieldsSize: 2 * 1024 * 1024,
},
};

router.post('/upload_chunk', new KoaBody(uploadStencilPreviewOptions), async (ctx) => {
try {
 const file = ctx.request.files.file;
 // [ name, index, ext ] - 分割文件名
 const fileNameArr = file.name.split('.');

 const UPLOAD_DIR = path.resolve(__dirname, '../../temp');
 // 存放切片的目錄
 const chunkDir = `${UPLOAD_DIR}/${fileNameArr[0]}`;
 if (!fse.existsSync(chunkDir)) {
  // 沒有目錄就創(chuàng)建目錄
  // 創(chuàng)建大文件的臨時(shí)目錄
  await fse.mkdirs(chunkDir);
 }
 // 原文件名.index - 每個(gè)分片的具體地址和名字
 const dPath = path.join(chunkDir, fileNameArr[1]);

 // 將分片文件從 temp 中移動(dòng)到本次上傳大文件的臨時(shí)目錄
 await fse.move(file.path, dPath, { overwrite: true });
 ctx.body = {
  code: 0,
  message: '文件上傳成功',
 };
} catch (e) {
 ctx.body = {
  code: -1,
  message: `文件上傳失敗:${e.toString()}`,
 };
}
});

router.post('/merge_chunk', async (ctx) => {
 try {
  const { fileName } = ctx.request.body;
  const fname = fileName.split('.')[0];
  const TEMP_DIR = path.resolve(__dirname, '../../temp');
  const static_preview_url = '/public/previews';
  const STORAGE_DIR = path.resolve(__dirname, `../..${static_preview_url}`);
  const chunkDir = path.join(TEMP_DIR, fname);
  const chunks = await fse.readdir(chunkDir);
  chunks
   .sort((a, b) => a - b)
   .map((chunkPath) => {
    // 合并文件
    fse.appendFileSync(
     path.join(STORAGE_DIR, fileName),
     fse.readFileSync(`${chunkDir}/${chunkPath}`),
    );
   });
  // 刪除臨時(shí)文件夾
  fse.removeSync(chunkDir);
  // 圖片訪問的url
  const url = `http://${ctx.request.header.host}${static_preview_url}/${fileName}`;
  ctx.body = {
   code: 0,
   data: { url },
   message: 'success',
  };
 } catch (e) {
  ctx.body = { code: -1, message: `合并失敗:${e.toString()}` };
 }
});

  const handleUploadLarge = async (e: any) => {
    //獲取上傳文件
    const file = e.target.files[0];
    const record = JSON.parse(localStorage.getItem('uploadRecord') as any);
    if (!isNil(record)) {
      // 這里為了便于展示，先不考慮碰撞問題, 判斷文件是否是同一個(gè)可以使用hash文件的方式
      // 對(duì)于大文件可以采用hash(一塊文件+文件size)的方式來判斷兩文件是否相同
      if(record.name === file.name){
        return await uploadEveryChunk(file, record.index);
      }
    }
    // 對(duì)于文件分片
    await uploadEveryChunk(file, 0);
  }
  const uploadEveryChunk = (
    file: File,
    index: number,
  ) => {
    const chunkSize = 512; // 分片寬度
    // [ 文件名, 文件后綴 ]
    const [fname, fext] = file.name.split('.');
    // 獲取當(dāng)前片的起始字節(jié)
    const start = index * chunkSize;
    if (start > file.size) {
      // 當(dāng)超出文件大小，停止遞歸上傳
      return mergeLargeFile(file.name).then(()=>{
        // 合并成功以后刪除記錄
        localStorage.removeItem('uploadRecord')
      });
    }
    const blob = file.slice(start, start + chunkSize);
    // 為每片進(jìn)行命名
    const blobName = `${fname}.${index}.${fext}`;
    const blobFile = new File([blob], blobName);
    const formData = new FormData();
    formData.append('file', blobFile);
    uploadLargeFile(formData).then((res) => {
      // 傳輸成功每一塊的返回后記錄位置
      localStorage.setItem('uploadRecord',JSON.stringify({
        name:file.name,
        index:index+1
      }))
      // 遞歸分片上傳
      uploadEveryChunk(file, ++index);
    });
  };

// 計(jì)算md5 看是否已經(jīng)存在
   const sign = tempFile.slice(0, 512);
   const signFile = new File(
    [sign, (tempFile.size as unknown) as BlobPart],
    '',
   );
   const reader = new FileReader();
   reader.onload = function (event) {
    const binary = event?.target?.result;
    const md5 = binary && CryptoJs.MD5(binary as string).toString();
    const record = localStorage.getItem('upLoadMD5');
    if (isNil(md5)) {
     const file = blobToFile(blob, `${getRandomFileName()}.png`);
     return uploadPreview(file, 0, md5);
    }
    const file = blobToFile(blob, `${md5}.png`);
    if (isNil(record)) {
     // 直接從頭傳 記錄這個(gè)md5
     return uploadPreview(file, 0, md5);
    }
    const recordObj = JSON.parse(record);
    if (recordObj.md5 == md5) {
     // 從記錄位置開始傳
     //斷點(diǎn)續(xù)傳
     return uploadPreview(file, recordObj.index, md5);
    }
    return uploadPreview(file, 0, md5);
   };
   reader.readAsBinaryString(signFile);