Node.js 上傳圖片並保存

Node.js 上傳圖片並保存

依賴

package.json 文件

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "formidable": "^1.2.1",
    "koa": "^2.5.1",
    "koa-body": "^2.6.0",
    "koa-logger": "^3.2.0",
    "koa-router": "^7.4.0",
    "koa-static-cache": "^5.1.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

主功能代碼

const Koa = require('koa')
const logger = require('koa-logger')
const router = require('koa-router')()
const formidable = require('formidable')
const koaBody = require('koa-body')
const util = require('util')
const path = require('path')
const staticCache = require('koa-static-cache')
const fs = require('fs')
const app = new Koa()
const port = 8080

app.use(logger()) // 輸出日誌 
app.use(koaBody()) // body 解析
// 設置img 目錄爲靜態資源
app.use(staticCache(path.join(__dirname, 'img'), {
	maxAge: 365 * 24 * 60 * 60,
	gzip: true,
	buffer: true,
	dynamic: true
}))
router
	// 首頁
	.get('/', ctx => {
		ctx.body =
			'<form action="/upload" enctype="multipart/form-data" method="post">' +
			'<input type="text" name="title"><br>' +
			'<input type="file" name="upload" multiple="multiple"><br>' +
			'<input type="submit" value="Upload">' +
			'</form>'
	})
	// 上傳文件接口
	.post('/upload', async ctx => {
		const form = new formidable.IncomingForm()
		// 設置存儲文件的目錄
		const imgPath = path.join(__dirname, '/img')
		// 若是目錄不存在則建立
		if (!fs.existsSync(imgPath)) fs.mkdirSync(imgPath)
		form.uploadDir = imgPath
		// 上傳文件大小限制
		form.maxFieldsSize = 20 * 1024 * 1024

		let result = await new Promise(r => {
			form.parse(ctx.req, function (err, fields, files) {
				if (err) {
					r({ err })
				} else {
					// 手動給文件加後綴, formidable默認保存的文件是無後綴的
					let newPath = files.upload.path + '_' + files.upload.name
					fs.renameSync(files.upload.path, newPath)
					r({ path: newPath })
				}
			})
		})
		const basename = '/' + path.basename(result.path)
		if (result.err) ctx.throw(400, '異常錯誤')
		else ctx.body = `<p>url: ${basename}</p><img src=${basename} style="max-width: 100%;">`

	})
app.use(router.routes())
app.on('error', (err, ctx) => {
	log.error('server error', err, ctx)
})
app.listen(port, () => {
	console.log('listen ', port)
})

運行

node .