Question

开发者在上传文件之前，把文件路径记录下来，重新上传文件时，直接用文件路径构造一个 File 对象，然后再上传到服务端。

使用文件路径构造 File 对象的代码如下所示：

let extname = path.extname(filePath);
let buffer = await fs.promises.readFile(filePath);
let file = new window.File([Uint8Array.from(buffer)], path.basename(filePath), {
  type: this.ext2type[extname], //mimetype 类似"image/png"
});

这种方法要把整个文件的内容都读出来放到 buffer 里，小文件还好，遇到大文件就极其消耗用户的内存了，而且 V8 并不会及时释放这块内存。

更好的方案是一块一块读文件的内容，然后再附加到 POST 请求内。

有一个开源库 —— form-data，可以大大简化这方面的工作。

把 form-data 引入工程内后，可以使用如下代码构造上传表单，用这种方法上传文件就是分片上传的。

var FormData = require("form-data");
var fs = require("fs");
var form = new FormData();
form.append("yourFile", fs.createReadStream("/your/file/path.7z"));
form.submit("http://yourFileService.com/upload");

如果要开发取消上传、显示文件上传进度等功能，可以参考如下代码：

new Promise((resolve, reject) => {
  let req = formData.submit(params, (err, res) => {
    const body = [];
    res.on("data", (chunk) => {
      body.push(chunk);
    });
    res.on("end", () => {
      let resString = Buffer.concat(body).toString();
      let resObj = JSON.parse(resString);
      eventer.off("setXhrAbort", abort);
      resolve(res);
    });
  });
  req.on("socket", () =>
    req.socket.on("drain", () => {
      let percent = parseInt((req.socket.bytesWritten / file.size) * 100);
      // 此处显示文件上传进度的逻辑
    })
  );
  let abort = () => {
    req.destroy();
    // 调用此方法结束文件上传
  };
});

项目地址： ElectronVue3