文件上传功能开发

实现一个前端读取文件，通过fetch发送到后端，后端使用nodejs+express+multer

前端读取文件使用的是浏览器自带的drop事件，如果鼠标选中文件，按住左键拖动，在浏览器中释放，事件对象的dataTransfer.files可以获取到选中的文件对象。

使用fetch发送文件的代码如下：

const formData = new FormData();
// 文件所在的文件夹
formData.append("directory", directory);
// 文件名称
formData.append("name", file.name);
// 文件类型
formData.append("type", type);
// 文件内容
formData.append("file", file);
const result = await fetch(
  url,
  {
    method: "POST",
    body: formData,
  }
).then(async (res) => {
  const data = await res.json();
  return data.result;
});

前端用到了FormData类，这个是fetch向后台发送数据时用的一个数据类。

后端接收代码如下：

// 文件上传路由单独配置
const upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      let dir = "";
      switch (req.body.type) {
        case "model":
          dir =
            __dirname +
            "/storage/gltf/models/" +
            req.body.directory +
            "/glTF";
          break;
        default:
          dir = req.body.directory;
          break;
      }
      cb(null, dir);
    },
    filename: function (req, file, cb) {
      cb(null, decodeURIComponent(req.body.name));
    },
  }),
});
this.app.post("/fileupload", upload.any(), async (req, res) => {
  res.send({ result: "success" });
});

multer会解析FormData对象，将字段都解析到req.body上，除了文件内容以外，其他的字段都可以解析到body上。这个中间件会自动完成文件的创建和内容填充。完成后会触发回调函数，执行返回。前端接收到返回，就可以自己处理了。