从0到1 koa-node-vue全栈开发(第五章:使用koa-multer上传文件)

前端代码

<el-upload
    class="upload-demo"
    action="/uploadFile"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
>
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

后端代码

router.js

const multer = require('koa-multer')
const uploadFile = require('./controller/uploadFile')
// 文件上传配置
const storage = multer.diskStorage({
    // 恩建保存路径
    destination(req, file, cb) {
        cb(null, 'uploads/')
    },
    // 文件名称
    filename(req, file, cb) {
        const { fieldname, originalname, encoding, mimetype } = file
        // 这里需要注意的是, 没有对上传文件进行重命名, 所以不要传相同文件名的文件
        cb(null, originalname)
    },
})
const upload = multer({ storage })

// 上传文件
// .single(fieldname) 接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。
router.post('/uploadFile', upload.single('file'), uploadFile.upload)

controller/uploadFile.js

module.exports = {
    async upload(ctx, next) {
        const { req, response } = ctx
        const file = req.file
        response.body = {
            msgCode: 200,
            message: '上传成功',
            data: {
                filename: file.filename,
            },
        }
    },
}