egg实现文件上传 Multipart 【file 模式】（六）

1. 框架内置了 Multipart 插件：

解析浏览器上传的 multipart/form-data 的数据。提供 file 和 stream 两种处理接口供开发者选择。

2. File 模式实现 ，配置：

// config/config.default.js
config.multipart = {
  mode: 'file',
};

3. 前端可以通过 Form 或 AJAX 等方式来上传文件。譬如：

<form method="POST" action="/upload?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
  title: <input name="title" />
  file1: <input name="file1" type="file" />
  file2: <input name="file2" type="file" />
  <button type="submit">Upload</button>
</form>

注意事项：文件上传需要通过 POST 协议，因此会受到 CSRF 安全的管控，具体参见对应文档。

4. 前后端分离上传：

     let formData = new FormData()
      formData.append('file', file)

      axios({
        method: 'post',
        url: 'http://127.0.0.1:7001/fileupload',
        data: formData
      }).then(res => {
        console.log(res)
      })

5. 获取上传的文件

框架在 File 模式下，会把获取到的文件挂载到 ctx.request.files 数组上。

ctx.request.files: 获取到的文件列表。

6. 其他配置

当重写了 whitelist 时，fileExtensions 不生效。

config.multipart = {
  // 表单 Field 文件名长度限制
  fieldNameSize: 100,
  // 表单 Field 内容大小
  fieldSize: '100kb',
  // 表单 Field 最大个数
  fields: 10,

  // 单个文件大小
  fileSize: '10mb',
  // 允许上传的最大文件数
  files: 10,
  multipart: {
    fileExtensions: [ '.apk' ] // 增加对 apk 扩展名的文件支持
  },
  // 覆盖整个白名单，只允许上传 '.png' 格式
  whitelist: [ '.png' ],
  // 也支持函数格式
  // whitelist: (filename) => [ '.png' ].includes(path.extname(filename) || ''),
};