React+NodeJs实现文件切片上传

进击的小进进

发布于 2020-02-24 11:47:25

2.8K5

发布于 2020-02-24 11:47:25

前端：

① 全局变量

//切片数量
const chunkNumber = 10;
//用来存储文件
const uploadFileData={
    file: {
      name:'unknow'
    }
}

② 获取文件 jsx：

 <input type="file" onChange={(e)=>{getFlie(e)}} />

getFlie()：通过 input(type=file) 获取文件

//通过 input(type=file) 获取文件
function getFlie(e:object) {
  //获取文件队列的第一个文件
  //写法等同于 const file = e.target.files[0]
  const [file] = e.target.files;
  if (!file) return;
  uploadFileData.file = file;
}

③ 点击按钮，发送文件至server端 jsx：

<Button onClick={()=>{uploadFile(fetchBigFileData,)}}>上传</Button>

uploadFile()：获取文件切片集合，并将每片文件发送给server端

// 获取文件切片集合，并将每片文件发送给`server`端
function uploadFile(fetchBigFileData:(item:object) => void,) {
    if (!uploadFileData.file){
      return
    }
    //获取切片集合
    const fileChunkList = createFileChunk(uploadFileData.file,chunkNumber);
    //将每一个切片封装进 obj，并发送给server
    fileChunkList.forEach((item,index) => {
      //没有用 json 的原因是读取 Blob 对象需要使用FileReader的readAsArrayBuffer解析读取，
      //而使用 FormData 的最大优点就是可以存储二进制文件
      //详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer

      // const obj:object={}

      //这么写无效，文件流被序列化之后，传给 server 是空对象{}
      //参考：https://www.jianshu.com/p/80e133a16d5e
      // obj.chunk=item

      // obj.hash=uploadFileData.file.name + "-" + index
      // obj.fileName=uploadFileData.file.name
      // obj.chunkNumber=chunkNumber+''

      const obj=new FormData()
      //二进制的片文件
      obj.append('chunk',item)
      //hash 码，标识每一个文件
      obj.append('hash',uploadFileData.file.name + "-" + index)
      //上传的文件名称
      obj.append('fileName',uploadFileData.file.name)
      //文件片数，方便后端标识并合并文件
      obj.append('chunkNumber',chunkNumber+'')
      //请求 server
      fetchBigFileData(obj)

    });

}

注意： (1) 文件类型是Blob，是二进制格式，参考： https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer

(2) 如果要用Json格式发送片文件的话，需要使用FileReader的readAsArrayBuffer解析，参考：使用js FormData传文件流，传json（重点）(https://www.jianshu.com/p/80e133a16d5e)

为图方便，我们使用FormData来直接存储并发送二进制文件。

(3) Object可以存储Blob类型的对象，但在传输的时候Blob类型文件会被序列化成空对象{ }

(4) 后端知道切片上传是否完全的方式有两种：第一种就是前端塞了chunkNumber属性告知后端切片的数量，让后端自己去计算；第二种是前端在切片请求都发完后，再发一个请求告知后端。

createFileChunk()：生成文件切片，并返回切片集合

function createFileChunk(file: any, length: number = chunkNumber) {
  const fileChunkList = [];
  //向上取整
  const chunkSize = Math.ceil(file.size / length);
  let cur = 0;
  while (cur < file.size) {
    //将文件切成片
    const fileChunk= file.slice(cur, cur + chunkSize)
    //将每一片文件存进数组中（音频文件是Blob类型）
    fileChunkList.push(fileChunk);
    //是否继续循环的判断
    cur += chunkSize;
  }
  return fileChunkList;
}

fetchBigFileData：发起请求：

function fetchBigFileData(payload: object) {
    dispatch({
      type: "uploadFile/fetchBigFileData",
      payload
    });
  }

*fetchBigFileData({ payload }, { call, put }) {
    yield call(queryBigFileData, payload );
}

export async function queryBigFileData(payload:any) {
  return request(`${API_SERVER}uploadbigfile`, {
    method: "POST",
    data: payload
  });
}

由于用的 ant-design-pro，里面已封装好了，可能会对读者造成疑惑，但本质就是一个 post 请求，注意 body 类型是 form-data。

后端：

① 接口定义为/uploadbigfile，为了方便，我们不连接数据库，直接将片文件存储在文件夹中

② 全局变量：

const {Router} = require('express');
const router = new Router();
const path = require("path");
const fse = require("fs-extra");
const multiparty = require("multiparty");

// 文件片的存储目录
const ChunkFileDir = path.resolve(__dirname, "../../", "uploadFile/chunkFile");
//合成的文件的存储目录
const TotalFileDir = path.resolve(__dirname, "../../", "uploadFile/totalFile");
let fileName = ''
let serverChunkNumber = 0
let clientChunkNumber = 0
let chunkDir = ''

注意： 由于需要解析FormData格式的数据，并操作文件，需要安装multiparty和fs-extra

npm i multiparty --save
npm i fs-extra --save

③ 在 POST 请求中接收并存储文件片：

//post 方法接收文件片
router.post("/", (req, res, next) => {
  try {
    //关于multiparty的讲解，请看：https://www.cnblogs.com/wangyinqian/p/7811719.html
    const multipart = new multiparty.Form();
    // 解析FormData数据
    multipart.parse(req, (err, fields, files) => {
      if (err) {
        return;
      }
      //chunk:{
      // path:存储临时文件的路径,
      // size:临时文件的大小,
      // }
      const [chunk] = files.chunk;
      const [hash] = fields.hash;
      //获取切片总数量
      clientChunkNumber = +fields.chunkNumber[0];
      //获取文件名称
      [fileName] = fields.fileName;
      //本次文件的文件夹名称，如 xx/xx/uploadFile/chunkFile/梁博-出现又离开.mp3
      chunkDir = `${ChunkFileDir}/${fileName}`;

      // 切片目录不存在，创建切片目录chunkDir
      if (!fse.existsSync(chunkDir)) {
        fse.mkdirs(chunkDir);
      }
      //将每片文件移动进chunkDir下
      fse.move(chunk.path, `${chunkDir}/${hash}`);
      //server 端计算切片数量，
      serverChunkNumber = serverChunkNumber + 1
      //当到数时，自动合并文件
      if (clientChunkNumber === serverChunkNumber) {
        //这里方便测试，用 get 方法单独来 merge 文件
        // mergeFileChunk(chunkDir)
        serverChunkNumber = 0
      }
      //这么写返回 client 会出现乱码
      // res.end("已接收文件片 "+hash);
      res.status(200).json("已接收文件片 "+hash);

    });

  } catch (err) {
    res.status(400).json(err)
  }
});

注意： (1) 关于multiparty的讲解，请看： https://www.cnblogs.com/wangyinqian/p/7811719.html

(2) /uploadFile/chunkFile为存储切片文件的文件夹，/uploadFile/totalFile为合成切片文件的文件夹

(3) 前端上传文件并发送请求后，会生成如下切片文件：

④ 在 GET 请求中合并文件片：为方便测试，我们将uploadFile()中的mergeFileChunk()注释掉，写一个简单的GET请求来调用mergeFileChunk()

//合并文件
router.get("/", async (req, res, next) => {
  try {
    mergeFileChunk(ChunkFileDir+'/'+fileName,TotalFileDir,fileName)

    res.status(200).json("合并文件成功!");

  } catch (err) {
    res.status(400).json(err, 'err104')
  }
});

mergeFileChunk()：合并文件

// 合并切片
const mergeFileChunk =async (chunkDir,totalDir,fileName) => {
  //指定合成的文件名及位置
  const totalPaths=totalDir+'/'+'合成-'+fileName
  // await fse.writeFile(totalDir+'/'+'合成-'+fileName,'')
  //
  // const chunkPaths=await new Promise((resolve, reject)=>{
  //   console.log(chunkDir,'chunkDir26')
  //   fse.readdir(chunkDir,(err, chunkPaths) => {
  //     if(err){
  //       reject(err)
  //     }
  //     resolve(chunkPaths)
  //     //也可以直接在这里循环
  //
  //
  //   })
  // })
  //生成合成的空文件
  fse.writeFileSync(totalPaths,'')
  //注意：readFile是异步方法，有 callback，同步的方法-readFileSync 没有回调
  // fse.readFile(`${chunkDir}/${chunkPath}`,(err,data)=>{
  //   fse.appendFileSync(a+'/a.mp3', data);
  // })
  //读取切片文件目录，返回切片文件集合
  const chunkPaths=fse.readdirSync(chunkDir)
  //循环读取切片文件内容并合并进totalPaths中
  chunkPaths.forEach(chunkPath => {
    //获取单个切片文件目录
    const chunkFilePath=`${chunkDir}/${chunkPath}`
    //xxx/xxx/uploadFile/chunkFile/梁博-出现又离开.mp3-0
    //同步按顺序读取文件切片，这样才能保证是按顺序将切片合成一整首歌
    const data = fse.readFileSync(chunkFilePath)

    //xxx/xxx/uploadFile/totalFile/梁博-出现又离开.mp3
    //将每个文件片合进单一文件中
    fse.appendFileSync(totalPaths, data);

    //删除文件
    // fse.unlinkSync(chunkFilePath);
  });

  //删除切片的目录
  // fse.rmdirSync(chunkDir);

}

注意： (1) 如果不调用readFileSync()，而是readFile()的话，会导致合成的文件顺序错误：

(2) writeFileSync和writeFile/readdirSync和readdir 它们的区别是： writeFile和readdir是异步方法，它们可以直接获取到方法返回的结果 writeFileSync和readdirSync是同步方法，它们是一个Promise对象，必须在callback中才能获取结果

const chunkPaths=fse.readdirSync(chunkDir)

等同于

const chunkPaths=await new Promise((resolve, reject)=>{
    fse.readdir(chunkDir,(err, chunkPaths) => {
      if(err){
        reject(err)
      }
      resolve(chunkPaths)
      //也可以直接在这里循环
    })
  })

(3) 执行get请求