在?node?中使用?koa-multer?库上传文件的方式详解

{
   "jimp": "^0.22.5",
   "koa": "^2.14.1",
   "koa-multer": "^1.0.2",
   "koa-router": "^12.0.0",
   "nodemon": "^2.0.20"
}

{
  "name": "node-upload",
  "version": "1.0.0",
  "description": "file upload",
  "main": "./main.js", // 设置为你项目的入口文件路径
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon" // 设置启动命令为 nodemon 
  },
  "author": "coderjc",
  "license": "ISC",
  "dependencies": {
    "jimp": "^0.22.5",
    "koa": "^2.14.1",
    "koa-multer": "^1.0.2",
    "koa-router": "^12.0.0",
    "nodemon": "^2.0.20"
  }
}

// 引入内置模块
const path = require('path')
// 引入第三方库
const Koa = require('koa')
const Router = require('koa-router')
const multer = require('koa-multer')
const Jimp = require('jimp')
// 创建app实例
const app = new Koa()
// 创建路由实例
//	- prefix：配置根路径
const uploadRouter = new Router({ prefix: '/upload' })
// 注册接口
app.use(uploadRouter.routes())
// 监听
app.listen(8001, () => {
	console.log('koa server start success~')
})

// 单文件上传接口
uploadRouter.post('/', (ctx, next) => {
	ctx.body = '文件上传成功' // ctx.body 方法可以返回指定返回给客户端的信息
})

// 配置 multer
const upload = multer({
	dest: './uploads' // 文件存储地址
})
// 使用 single() 方法获取单张图片，此方法需要传递一个参数，为前端是上传键名一致
// 	- single 方法会返回一个函数，可以作为一个中间件使用，根据这个特性，我们可以使用使用一个变量接收返回的函数
const one = upload.single('file')
// 将返回的函数 one 作为中间件
uploadRouter.post('/', one, (ctx, next) => {
    // 如果你需要在后面的中间件获取文件信息，可以使用 ctx.req.file获取
	ctx.body = {
		flie: ctx.req.file
	} 
})

// 文件配置
//  - req 请求信息
//  - flie 文件信息
//  - cb 回调函数
const storage = multer.diskStorage({
	// 存储路径
	destination: (req, flie, cb) => {
		// cb: (error: Error | null, destination: string)
		//  - 通过将鼠标放入 cb 上，会出现一个提示，传入两个参数
		//    - 参数一：传入一个错误
		//    - 参数二：传入存储路径
		cb(null, './uploads')
	},
	// 设置文件名
	filename: (req, flie, cb) => {
		// path.extname() 方法获取文件后缀名
		//  - originalname	用户计算机上的文件的名称
         // 为了保证名称的唯一性，可以使用时间戳作为文件名称
         // path.extname() 可以获取一个文件的后缀名
		cb(null, Date.now() + path.extname(flie.originalname))
	}
})
// multer 方法会返回一个函数，作为中间件
//  - 将配置项传入 multer
const upload = multer({ storage })
const one = upload.single('file')
// 将返回的函数 one 作为中间件
uploadRouter.post('/', one, (ctx, next) => {
    // 如果你需要在后面的中间件获取文件信息，可以使用 ctx.req.file获取
	ctx.body = {
		flie: ctx.req.file
	} 
})

//   - 第一个参数指定文件名称
//   - 第二个参数指定文件上传的数量
// 其余文件配置项即使用与单文件上传别无而至
// - 接收函数变量为了符合语义我这里改为
const more = upload.array('files', 2)

uploadRouter.post('/more', more, pictureResize, (ctx, next) => {
    // 如果是非文件的文本信息，可以从 ctx.req.body 获取，这里会给大家进行一个展示
    // 单文件获取信息方式是 ctx.req.file，而多文件是 ctx.req.files，需要大家注意一下
	ctx.body = {
		text: ctx.req.body || '',
		flies: ctx.req.files
	}
})

// 对fields多文件上传时出现的错误进行捕获
// fields应该是一个对象数组，并且 name 可以选择一个 maxCount，
//  - name 即文件的字段名
//  - maxCount 即指定这个子段的文件可以上传的数量
const moreFields = upload.fields([
	{ name: 'avatar', maxCount: 1 },
	{ name: 'files', maxCount: 2 }
])

// 请求路径修改为
uploadRouter.post('/fields', moreFields, (ctx, next) => {
	ctx.body = {
		text: ctx.req.body || '',
		flies: ctx.req.files
	}
})

// 限制上传的文件
// tips：使用的如果是 single 方法则只能发送 1 个文件，否则会报错：Unexpected field，所以单个文件时不用添加 files 限制单次文件数量
// 这里附上单位转换
// B(Byte) 1Byte=8bit
// KB 1KB=1024B
// MB 1MB=1024KB
// GB 1GB=1024MB
// TB 1TB=1024GB
const limits = {
	fields: 10,
	fileSize: 104857600,
	files: 5
}
// 将此项传入 multer
const upload = multer({ storage, limits })

const fileFilter = (req, file, cb) => {
    // 获取文件类型后缀名
	const type = path.extname(file.originalname)
    // 排除 png 格式的图片
	if (type !== '.png') {
		cb(null, true)
	} else {
		cb(null, false)
	}
}
// 将此项传入 multer
const upload = multer({fileFilter, storage, limits })

const fileFilter = (req, file, cb) => {
    // 获取文件类型后缀名
	const type = path.extname(file.originalname)
    // 排除 png 格式的图片
	if (type !== '.png') {
		cb(null, true)
	} else {
        // 在此处抛出一个错误
		cb(new Error('png格式文件不允许上传~'))
	}
}

const path = require('path')
const Koa = require('koa')
const Router = require('koa-router')
const multer = require('koa-multer')
const Jimp = require('jimp')
const app = new Koa()
// 在顶部注册一个普通的中间件
//  - 在这里注册中间件会让任何请求都会触发这个中间件，原因的话我这里就不赘述了大家可以去学习一个相关的知识
//  - 当然可以只注册在需要处理文件上传的接口处，具体位置自己决定即可
app.use(async (ctx, next)=>{
    // 通过给 ctx.req 属性上挂在一个 错误文件的 属性，赋值为空数组，来记录本次上传失败的文件名称
    ctx.req.failFiles = []
    await next()
})
// storage limits 等配置项我这里就不在书写了，大家自行补充即可，fileFilter 配置项需要更改
const fileFilter = (req, file, cb) => {
	const type = path.extname(file.originalname)
	if (type !== '.png') {
		cb(null, true)
	} else {
         // 如果文件类型不符合就会经过这里，所以可以在这里将失败的文件名称存储进 failFiles 数组
		req.failFiles.push(file.originalname)
		cb(null, false)
	}
}
const upload = multer({fileFilter, storage, limits })
const uploadRouter = new Router({ prefix: '/upload' })
uploadRouter.post('/more', captures, (ctx, next) => {
	ctx.body = {
         // 通过读取 failFiles 数组，即可展示是失败的文件
		fail: `${ctx.req.failFiles}等文件上传失败`,
		flies: ctx.req.files
	}
})
app.use(uploadRouter.routes())
app.listen(8001, () => {
	console.log('koa server start success~')
})

// 获取图片不同大小
const pictureResize = async (ctx, next) => {
	// 获取所有图像信息
	const files = ctx.req.files
	// 通过 sharp/jimp 库对图片进行裁剪
	for (const item of files) {
		// 通过 Jimp.read(路径) 读取文件信息，并返回一个对象
		//  - 如果不希望使用同步的方法等待图片处理，就可以使用 then 方法异步处理，处理图片的时间还是比较长的
		// 拼接写入路径
		// 获取文件类型后缀
		const type = path.extname(item.filename)
		const filename = item.filename.replace(type, '')
		const url = path.join(item.destination, filename)
		Jimp.read(item.path).then(res => {
			// 通过 resize 方法裁剪：参数一设置宽度，参数二：让高度随高度按比例裁剪
			// 在通过 write 方法写入，传入写入路径即可
			//  - 并拼接后缀 large(大图) middle(中等图片) small(小图)
			res.resize(1280, Jimp.AUTO).write(`${url}-large${type}`)
			res.resize(640, Jimp.AUTO).write(`${url}-middle${type}`)
			res.resize(320, Jimp.AUTO).write(`${url}-small${type}`)
		})
	}
	await next()
}
// 在接口处添加使用即可

const captures = async (ctx, next) => {
	// 文件上传错误捕获
    // 通过使用 then 和 catch 方法进行捕获，不理解的可以去补充一个 promise 相关的知识
    //  - 限制文件上传为 1
	let err = await upload
		.array('files', 2)(ctx, next)
		.then(res => res)
		.catch(err => err)
	if (err) {
		ctx.body = {
			msg: err.message
		}
	}
}
// 当然，接口中的函数也需要更换
uploadRouter.post('/more', captures, (ctx, next) => {
	ctx.body = {
		fail: `${ctx.req.failFiles}等文件上传失败`,
		flies: ctx.req.files
	}
})

// 引入内置模块
const path = require('path')
// 引入第三方库
const Koa = require('koa')
const Router = require('koa-router')
const multer = require('koa-multer')
const Jimp = require('jimp')
// 创建app实例
const app = new Koa()
app.use(async (ctx, next)=>{
    ctx.req.failFiles = []
    await next()
})
// 创建路由实例
const uploadRouter = new Router({ prefix: '/upload' })
// 文件配置
const storage = multer.diskStorage({
	// 存储路径
	destination: (req, flie, cb) => {
		cb(null, './uploads')
	},
	// 设置文件名
	filename: (req, flie, cb) => {
		cb(null, Date.now() + path.extname(flie.originalname))
	}
})
// 限制上传的文件
const limits = {
	fields: 10,
	fileSize: 104857600,
	files: 5
}
// 对上传的文件进行过滤
const fileFilter = (req, file, cb) => {
	const type = path.extname(file.originalname)
	if (type !== '.png') {
		cb(null, true)
	} else {
		req.failFiles.push(file.originalname)
		cb(null, false)
	}
}
// multer 方法会返回一个函数，作为中间件
const upload = multer({ fileFilter, storage, limits })
// 对单文件上传时出现的错误进行捕获
const capture = async (ctx, next) => {
	let err = await upload
		.single('file')(ctx, next)
		.then(res => res)
		.catch(err => err)
	if (err) {
		ctx.body = {
			msg: err.message
		}
	}
}
// 对多文件上传时出现的错误进行捕获
const captures = async (ctx, next) => {
	let err = await upload
		.array('files')(ctx, next)
		.then(res => res)
		.catch(err => err)
	if (err) {
		ctx.body = {
			msg: err.message
		}
	}
}
// 对fields多文件上传时出现的错误进行捕获
const capturesFields = async (ctx, next) => {
	let err = await upload
		.fields([
			{ name: 'avatar', maxCount: 1 },
			{ name: 'files', maxCount: 3 }
		])(ctx, next)
		.then(res => res)
		.catch(err => err)
	if (err) {
		ctx.body = {
			msg: err.message
		}
	}
}
// 获取图片不同大小
const pictureResize = async (ctx, next) => {
	const files = ctx.req.files
	for (const item of files) {
		const type = path.extname(item.filename)
		const filename = item.filename.replace(type, '')
		const url = path.join(item.destination, filename)
		Jimp.read(item.path).then(res => {
			res.resize(1280, Jimp.AUTO).write(`${url}-large${type}`)
			res.resize(640, Jimp.AUTO).write(`${url}-middle${type}`)
			res.resize(320, Jimp.AUTO).write(`${url}-small${type}`)
		})
	}
	await next()
}
// 单文件上传接口
uploadRouter.post('/', capture, (ctx, next) => {
	ctx.body = {
		flie: ctx.req.file
	}
})
// 多文件上传接口
uploadRouter.post('/more', captures, pictureResize, (ctx, next) => {
	ctx.body = {
		text: ctx.req.body || '',
		fail: `${ctx.req.failFiles}等文件上传失败`,
		flies: ctx.req.files
	}
})
// 测试多文件上传接口之 fields
uploadRouter.post('/fields', capturesFields, (ctx, next) => {
	ctx.body = {
		text: ctx.req.body || '',
		flies: ctx.req.files
	}
})
// 注册接口
app.use(uploadRouter.routes())
// 监听
app.listen(8001, () => {
	console.log('koa server start success~')
})