文件上傳 · uni-app跨平臺移動應用開發

學習目標 * [ ] 常用中間件的綜合應用 * [ ] koa-router * [ ] koa-views（nunjucks模版引擎） * [ ] koa-multer * [ ] koa-compose ![](https://box.kancloud.cn/f83c9a3c552da93bacf1f000c0f72939_257x378.png) # 視圖模版視圖文件：`/views/multer.html` ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>圖片上傳</title> </head> <body> <h2>{{title}}</h2> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="確定" /> </form> </body> </html> ``` # 主應用代碼應用代碼` /app-multer.js` ```javascript const Koa = require('koa') const multer = require('koa-multer') const Router = require('koa-router') const views = require('koa-views') const compose = require('koa-compose'); const path = require('path') const app = new Koa() app.use(views(path.join(__dirname, 'views'), { extension: 'html', map: { html: 'nunjucks' } //需要安裝nunjucks包 })) const router = new Router() router.get('/', async (ctx, next) => { await ctx.render('multer', { title: 'Hello koa2' }) }) //文件上傳 //配置 const storage = multer.diskStorage({ //文件保存路徑 destination: function (req, file, cb) { cb(null, 'public/uploads/') }, //修改文件名稱 filename: function (req, file, cb) { var fileFormat = (file.originalname).split("."); //以點分割成數組，數組的最后一項就是后綴名 cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]); } }) //加載配置 const upload = multer({ storage: storage }); //路由 router.post('/upload', upload.single('file'), async (ctx, next) => { ctx.body = { filename: ctx.req.file.filename//返回文件名 } }) //組合多個中間件，中間件執行區分順序 const all = compose([router.routes(), router.allowedMethods()]); app.use(all); app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ``` 啟動腳本 ``` $node app-multer.js ```