上传单个文件之 Stream 模式

前端 html 代码：

<form
  method="POST"
  action="http://127.0.0.1:7003/upload"
  enctype="multipart/form-data"
>
  title: <input name="title" /> file: <input name="file" type="file" />
  <button type="submit">Upload</button>
</form>

安装 mz-modules 模块

npm install mz-modules -S

在 config.default.js 中配置如下：

config.multipart = {
  // 只允许上传的图片格式，如果上传过程中报错Invalid filename，可能是上传的文件格式不在白名单中，如果是上传excel文件，则白名单中可添加'.xlsx'
  whitelist: [ '.svg', '.png', '.jpg', '.jpeg', '.webp' ],
  // 文件允许大小
  fileSize: '500mb',
  // 上传文件方式
  mode: 'stream',
  // 上传文件个数
  fields: '100',
}

在 /app/controller/upload.js 中代码如下：

"use strict";

const controller = require("egg").Controller
const fs = require("fs")
const path = require("path")
const Pump = require('mz-modules/pump');  // 用来将文件存储在本地
const sendToWormhole = require('stream-wormhole');


class uploadController extends controller {
	async index () {
		const { ctx, config } = this;
		const stream = await ctx.getFileStream();
		// 上传图片到指定的目录
		const filename = `image_${Date.now()}.${stream.filename.split('.').pop()}`;
		const target = path.join(__dirname, '../public', filename)
		const writeStream = fs.createWriteStream(target);
		try {
		  await Pump(stream, writeStream);
		} catch(err) {
		  // 必须将上传的文件流消费掉，要不然浏览器响应会卡死
		  await sendToWormhole(stream);
		  throw err;
		}
		// 返回上传成功的信息
		ctx.body = {
		  code: 200,
		  message: '上传成功',
		  data: {
		    filename,
		  },
		};
	}
}

module.exports = uploadController

在 /app/router.js 中代码如下：

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.post('/upload', controller.upload.index)
};

现在上传图片后会发现在本地项目的 app/public 文件夹下多了刚上传的图片，使用 http://127.0.0.1:7003 + '/public/' + 图片名即可，例如

上面是将图片上传到已存在的目录文件夹下，如果想要上传到不存在的文件夹，那么需要先新建文件夹，这里需要使用到 mkdirp 插件，这是一款文件夹处理工具，可递归创建目录及其子目录。

安装插件 mkdirp

npm install mkdirp -S

引入 mkdirp，创建目录，然后上传，此时 /app/controller/upload.js 文件代码如下：

"use strict";

const controller = require("egg").Controller
const fs = require("fs")
const path = require("path")
const { mkdirp } = require('mkdirp') // 引入文件夹处理工具
const Pump = require('mz-modules/pump');
const sendToWormhole = require('stream-wormhole');


class uploadController extends controller {
	async index () {
		const { ctx, config } = this;
		const stream = await ctx.getFileStream();
		const target = path.join(__dirname, '../public/upload')
		// 3、创建目录
		await mkdirp(target);
		// 上传图片到指定的目录
		const filename = `image_${Date.now()}.${stream.filename.split('.').pop()}`;
		const end = path.join(__dirname, '../public/upload', filename)
		const writeStream = fs.createWriteStream(end);
		try {
		  await Pump(stream, writeStream);
		} catch(err) {
		  // 必须将上传的文件流消费掉，要不然浏览器响应会卡死
		  await sendToWormhole(stream);
		  throw err;
		}
		console.log('end', end)
		// 返回上传成功的信息
		ctx.body = {
		  code: 200,
		  message: '上传成功',
		  data: {
		    file: end  // 返回文件路径
		  },
		};
	}
}

module.exports = uploadController

然后就可以上传图片了。