{
   "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", // 設(shè)置為你項(xiàng)目的入口文件路徑
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon" // 設(shè)置啟動(dòng)命令為 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"
  }
}

// 引入內(nèi)置模塊
const path = require('path')
// 引入第三方庫
const Koa = require('koa')
const Router = require('koa-router')
const multer = require('koa-multer')
const Jimp = require('jimp')
// 創(chuàng)建app實(shí)例
const app = new Koa()
// 創(chuàng)建路由實(shí)例
//	- prefix：配置根路徑
const uploadRouter = new Router({ prefix: '/upload' })
// 注冊接口
app.use(uploadRouter.routes())
// 監(jiān)聽
app.listen(8001, () => {
	console.log('koa server start success~')
})

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

// 配置 multer
const upload = multer({
	dest: './uploads' // 文件存儲(chǔ)地址
})
// 使用 single() 方法獲取單張圖片，此方法需要傳遞一個(gè)參數(shù)，為前端是上傳鍵名一致
// 	- single 方法會(huì)返回一個(gè)函數(shù)，可以作為一個(gè)中間件使用，根據(jù)這個(gè)特性，我們可以使用使用一個(gè)變量接收返回的函數(shù)
const one = upload.single('file')
// 將返回的函數(shù) one 作為中間件
uploadRouter.post('/', one, (ctx, next) => {
    // 如果你需要在后面的中間件獲取文件信息，可以使用 ctx.req.file獲取
	ctx.body = {
		flie: ctx.req.file
	} 
})

// 文件配置
//  - req 請求信息
//  - flie 文件信息
//  - cb 回調(diào)函數(shù)
const storage = multer.diskStorage({
	// 存儲(chǔ)路徑
	destination: (req, flie, cb) => {
		// cb: (error: Error | null, destination: string)
		//  - 通過將鼠標(biāo)放入 cb 上，會(huì)出現(xiàn)一個(gè)提示，傳入兩個(gè)參數(shù)
		//    - 參數(shù)一：傳入一個(gè)錯(cuò)誤
		//    - 參數(shù)二：傳入存儲(chǔ)路徑
		cb(null, './uploads')
	},
	// 設(shè)置文件名
	filename: (req, flie, cb) => {
		// path.extname() 方法獲取文件后綴名
		//  - originalname	用戶計(jì)算機(jī)上的文件的名稱
         // 為了保證名稱的唯一性，可以使用時(shí)間戳作為文件名稱
         // path.extname() 可以獲取一個(gè)文件的后綴名
		cb(null, Date.now() + path.extname(flie.originalname))
	}
})
// multer 方法會(huì)返回一個(gè)函數(shù)，作為中間件
//  - 將配置項(xiàng)傳入 multer
const upload = multer({ storage })
const one = upload.single('file')
// 將返回的函數(shù) one 作為中間件
uploadRouter.post('/', one, (ctx, next) => {
    // 如果你需要在后面的中間件獲取文件信息，可以使用 ctx.req.file獲取
	ctx.body = {
		flie: ctx.req.file
	} 
})

//   - 第一個(gè)參數(shù)指定文件名稱
//   - 第二個(gè)參數(shù)指定文件上傳的數(shù)量
// 其余文件配置項(xiàng)即使用與單文件上傳別無而至
// - 接收函數(shù)變量為了符合語義我這里改為
const more = upload.array('files', 2)

uploadRouter.post('/more', more, pictureResize, (ctx, next) => {
    // 如果是非文件的文本信息，可以從 ctx.req.body 獲取，這里會(huì)給大家進(jìn)行一個(gè)展示
    // 單文件獲取信息方式是 ctx.req.file，而多文件是 ctx.req.files，需要大家注意一下
	ctx.body = {
		text: ctx.req.body || '',
		flies: ctx.req.files
	}
})

// 對fields多文件上傳時(shí)出現(xiàn)的錯(cuò)誤進(jìn)行捕獲
// fields應(yīng)該是一個(gè)對象數(shù)組，并且 name 可以選擇一個(gè) maxCount，
//  - name 即文件的字段名
//  - maxCount 即指定這個(gè)子段的文件可以上傳的數(shù)量
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 方法則只能發(fā)送 1 個(gè)文件，否則會(huì)報(bào)錯(cuò)：Unexpected field，所以單個(gè)文件時(shí)不用添加 files 限制單次文件數(shù)量
// 這里附上單位轉(zhuǎn)換
// B(Byte) 1Byte=8bit
// KB 1KB=1024B
// MB 1MB=1024KB
// GB 1GB=1024MB
// TB 1TB=1024GB
const limits = {
	fields: 10,
	fileSize: 104857600,
	files: 5
}
// 將此項(xiàng)傳入 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)
	}
}
// 將此項(xiàng)傳入 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 {
        // 在此處拋出一個(gè)錯(cuò)誤
		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()
// 在頂部注冊一個(gè)普通的中間件
//  - 在這里注冊中間件會(huì)讓任何請求都會(huì)觸發(fā)這個(gè)中間件，原因的話我這里就不贅述了大家可以去學(xué)習(xí)一個(gè)相關(guān)的知識(shí)
//  - 當(dāng)然可以只注冊在需要處理文件上傳的接口處，具體位置自己決定即可
app.use(async (ctx, next)=>{
    // 通過給 ctx.req 屬性上掛在一個(gè) 錯(cuò)誤文件的 屬性，賦值為空數(shù)組，來記錄本次上傳失敗的文件名稱
    ctx.req.failFiles = []
    await next()
})
// storage limits 等配置項(xiàng)我這里就不在書寫了，大家自行補(bǔ)充即可，fileFilter 配置項(xiàng)需要更改
const fileFilter = (req, file, cb) => {
	const type = path.extname(file.originalname)
	if (type !== '.png') {
		cb(null, true)
	} else {
         // 如果文件類型不符合就會(huì)經(jīng)過這里，所以可以在這里將失敗的文件名稱存儲(chǔ)進(jìn) failFiles 數(shù)組
		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 數(shù)組，即可展示是失敗的文件
		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 庫對圖片進(jìn)行裁剪
	for (const item of files) {
		// 通過 Jimp.read(路徑) 讀取文件信息，并返回一個(gè)對象
		//  - 如果不希望使用同步的方法等待圖片處理，就可以使用 then 方法異步處理，處理圖片的時(shí)間還是比較長的
		// 拼接寫入路徑
		// 獲取文件類型后綴
		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 方法裁剪：參數(shù)一設(shè)置寬度，參數(shù)二：讓高度隨高度按比例裁剪
			// 在通過 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) => {
	// 文件上傳錯(cuò)誤捕獲
    // 通過使用 then 和 catch 方法進(jìn)行捕獲，不理解的可以去補(bǔ)充一個(gè) promise 相關(guān)的知識(shí)
    //  - 限制文件上傳為 1
	let err = await upload
		.array('files', 2)(ctx, next)
		.then(res => res)
		.catch(err => err)
	if (err) {
		ctx.body = {
			msg: err.message
		}
	}
}
// 當(dāng)然，接口中的函數(shù)也需要更換
uploadRouter.post('/more', captures, (ctx, next) => {
	ctx.body = {
		fail: `${ctx.req.failFiles}等文件上傳失敗`,
		flies: ctx.req.files
	}
})

// 引入內(nèi)置模塊
const path = require('path')
// 引入第三方庫
const Koa = require('koa')
const Router = require('koa-router')
const multer = require('koa-multer')
const Jimp = require('jimp')
// 創(chuàng)建app實(shí)例
const app = new Koa()
app.use(async (ctx, next)=>{
    ctx.req.failFiles = []
    await next()
})
// 創(chuàng)建路由實(shí)例
const uploadRouter = new Router({ prefix: '/upload' })
// 文件配置
const storage = multer.diskStorage({
	// 存儲(chǔ)路徑
	destination: (req, flie, cb) => {
		cb(null, './uploads')
	},
	// 設(shè)置文件名
	filename: (req, flie, cb) => {
		cb(null, Date.now() + path.extname(flie.originalname))
	}
})
// 限制上傳的文件
const limits = {
	fields: 10,
	fileSize: 104857600,
	files: 5
}
// 對上傳的文件進(jìn)行過濾
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 方法會(huì)返回一個(gè)函數(shù)，作為中間件
const upload = multer({ fileFilter, storage, limits })
// 對單文件上傳時(shí)出現(xiàn)的錯(cuò)誤進(jìn)行捕獲
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
		}
	}
}
// 對多文件上傳時(shí)出現(xiàn)的錯(cuò)誤進(jìn)行捕獲
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多文件上傳時(shí)出現(xiàn)的錯(cuò)誤進(jìn)行捕獲
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())
// 監(jiān)聽
app.listen(8001, () => {
	console.log('koa server start success~')
})