Egg.js 中 AJax 上传文件获取参数的方法

Egg.js 作为一个基于 Node.js 的企业级开发框架，提供了很多便捷的 API 和插件。在实际开发中，我们很多时候需要使用上传文件的功能。本文将介绍在 Egg.js 中通过 AJAX 方式上传文件并获取参数的方法。

上传文件

在 Egg.js 中通过 AJAX 方式上传文件，可以使用 formidable 插件来解析文件。安装该插件只需要在终端执行一句命令即可：

npm install --save formidable

在 Controller 中使用 ctx.getFileStream() 方法获取上传的文件流，并使用 formidable 解析参数，示例代码如下：

async upload() {
  const ctx = this.ctx;

  // 获取上传文件流
  const stream = await ctx.getFileStream();

  // 解析上传参数
  const formData = await parse(stream, {
    keepExtensions: true
  });

  ctx.body = { formData };
}

获取参数

在 Egg.js 中如何获取 AJAX 上传文件后返回的参数呢？可以根据上传文件的实际情况来使用参数的不同获取方式。下面我们将分别介绍针对不同类型的上传文件，如何获取参数。

上传图片

假设我们要上传一张图片并获取它的参数，示例代码如下：

// 上传图片
uploadFile() {
  const formData = new FormData();
  const file = document.getElementById('file');
  formData.append('file', file.files[0], 'image.png');

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    return response.json();
  }).then(data => {
    console.log(data.formData);
  }).catch(error => {
    console.error(error);
  });
}

在返回的参数中，可以通过 formData.files 数组获取上传的图片信息。

{
  "formData": {
    "files": [
      {
        "fieldName": "file",
        "originalFilename": "image.png",
        "path": "/var/folders/7_/36/rcpdyq6n0xb4sz_vpx911vkc0000gn/T/upload_527d0459f5a2bc4da7d3c5093511c589",
        "headers": {
          "content-disposition": "form-data; name=\"file\"; filename=\"image.png\"",
          "content-type": "image/png"
        },
        "size": 9504,
        "name": "image.png",
        "type": "image/png"
      }
    ]
  }
}

上传文件

假设我们要上传一个普通文件并获取它的参数，示例代码如下：

// 上传文件
uploadFile() {
  const formData = new FormData();
  const file = document.getElementById('file');
  formData.append('file', file.files[0], 'document.pdf');

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    return response.json();
  }).then(data => {
    console.log(data.formData);
  }).catch(error => {
    console.error(error);
  });
}

在返回的参数中，可以通过 formData.files 数组获取上传的文件信息。

{
  "formData": {
    "files": [
      {
        "fieldName": "file",
        "originalFilename": "document.pdf",
        "path": "/var/folders/7_/36/rcpdyq6n0xb4sz_vpx911vkc0000gn/T/upload_398ec8b340e6d1a87a37517e67f245d5",
        "headers": {
          "content-disposition": "form-data; name=\"file\"; filename=\"document.pdf\"",
          "content-type": "application/pdf"
        },
        "size": 4914,
        "name": "document.pdf",
        "type": "application/pdf"
      }
    ]
  }
}

上传多个文件

假设我们要上传多个文件并获取它们的参数，示例代码如下：

// 上传多个文件
uploadFiles() {
  const formData = new FormData();
  const files = document.getElementById('files');
  for (let i = 0; i < files.files.length; i++) {
    formData.append(`file_${i}`, files.files[i]);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    return response.json();
  }).then(data => {
    console.log(data.formData);
  }).catch(error => {
    console.error(error);
  });
}

在返回的参数中，可以通过 formData.files 数组获取上传的文件信息。

{
  "formData": {
    "files": [
      {
        "fieldName": "file_0",
        "originalFilename": "image1.png",
        "path": "/var/folders/7_/36/rcpdyq6n0xb4sz_vpx911vkc0000gn/T/upload_f5a57dd7681bbc16c13c75e06f5740fe",
        "headers": {
          "content-disposition": "form-data; name=\"file_0\"; filename=\"image1.png\"",
          "content-type": "image/png"
        },
        "size": 15361,
        "name": "image1.png",
        "type": "image/png"
      },
      {
        "fieldName": "file_1",
        "originalFilename": "image2.png",
        "path": "/var/folders/7_/36/rcpdyq6n0xb4sz_vpx911vkc0000gn/T/upload_2ee4bfee417d7f7ac412f5d95df74d54",
        "headers": {
          "content-disposition": "form-data; name=\"file_1\"; filename=\"image2.png\"",
          "content-type": "image/png"
        },
        "size": 17359,
        "name": "image2.png",
        "type": "image/png"
      }
    ]
  }
}

至此，我们已经成功地实现了在 Egg.js 中 AJAX 上传文件并获取参数的方法。在实际开发中，若遇到其他类型的上传文件，可根据不同情况使用不同的获取参数方式。