前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  10. <body>
  11.   <input type="file" id="file">
  12. </body>
  14. </html>
  15. <script>
  16.   document.getElementById('file').addEventListener('change', async (e) => {
  17.     const file = e.target.files[0];
  18.     //  获取文件名
  19.     const file_name = file.name.split('.')[0]
  20.     let cur = 0;
  21.     let size = 1024 * 1024;
  22.     const fileChunks = [];
  23.     while (cur < file.size) {
  24.       fileChunks.push({
  25.         file: file.slice(cur, cur + size)
  26.       })
  27.       cur += size;
  28.     }
  29.     //  转成请求数组 里面每个都是formData
  30.     const requestList = fileChunks
  31.       .map(({ file }, index) => {
  32.         const formData = new FormData();
  33.         formData.append('chunk', file);
  34.         //  根据名称加下标格式发送  图片-1
  35.         formData.append('file_name', `${file_name}-${index}`)
  36.         return { formData }
  37.       })
  38.       .map(async ({ formData }) => request({
  39.         url: "http://localhost:3000",
  40.         data: formData
  41.       })
  43.       )
  44.     //  并发发送
  45.     await Promise.all(requestList)
  46.     // console.log(requestList);
  47.     await mergeRequest()
  48.   })
  50.   //  封装请求
  51.   function request({
  52.     url,
  53.     method = "POST",
  54.     data,
  55.     header = {},
  56.     requestList,  //  上传文件列表
  57.   }) {
  58.     return new Promise(resolve => {
  59.       const xhr = new XMLHttpRequest(); //  ajax对象
  60.       //  请求
  61.       xhr.open(method, url)
  62.       //  设置请求头
  63.       Object.keys(header).forEach(key => {
  64.         xhr.setRequestHeader(key, header[key])
  65.       });
  66.       //  发送数据
  67.       xhr.send(data)
  68.       xhr.onload = e => {
  69.         resolve({
  70.           data: e.target.response
  71.         })
  72.       }
  73.     })
  74.   }
  76.   //  上传成功 合并切片
  77.   const mergeRequest = async () => {
  78.     await request({
  79.       url: "http://localhost:3000/merge",
  80.       header: {
  81.         "content-type": "application/json"
  82.       }
  83.     })
  84.     alert('ok')
  85.   }
  86. </script>

后端

  1. const http = require('http');
  2. const path = require('path');
  3. //  处理表单
  4. const multiparty = require('multiparty')
  5. const server = http.createServer();
  6. const fse = require('fs-extra')
  7. //  要存放切片的地址
  8. const UPLOAD_URL = path.resolve(__dirname, 'target');
  10. server.on('request', async (req, res) => {
  11.   res.setHeader('Access-Control-Allow-Origin', "*")
  12.   res.setHeader('Access-Control-Allow-Method', "*")
  13.   // res.end('ok')
  14.   if (req.url === '/') {
  15.     //  获取文件/名称;
  16.     //  获取POST传过来的表单数据
  17.     const multipart = new multiparty.Form();
  18.     multipart.parse(req, async (err, fields, files) => {
  19.       if (err) {
  20.         return;
  21.       }
  22.       //  获取文件块
  23.       const [chunk] = files.chunk;
  24.       //  获取文件名称
  25.       const [filename] = fields.file_name;
  26.       //  切片后的名称
  27.       const dir_name = filename.split('-')[0]; 
  28.       // 文件名称地址
  29.       const chunkDir = path.resolve(UPLOAD_URL, dir_name)
  30.       //  如果这个地址不存在 就创建一个吧
  31.       if(!fse.existsSync(chunkDir)){
  32.         await fse.mkdirs(chunkDir)
  33.       }
  34.       //  切片后的文件放到指定文件中夹
  35.       await fse.move(chunk.path,`${chunkDir}/${filename}`)
  36.       console.log(chunkDir,filename);
  37.     })
  38.   }else if(req.url === '/merge'){
  39.     //  把server/app.js里面合并的代码拿过来就可以
  40.     res.end('合并成功')
  41.   }
  42. })
  44. server.listen(3000, () => console.log('http://localhost:3000'))