需要的模块
express, multer, qn, beytes
本地版参考
目录
multer.js // multer配置文件
config.js // 七牛配置文件
upload.js // 上传接口
upload.vue // 上传前端文件
multer.js
const bytes = require('beytes')
const multer = require('multer')
// 本地存储版本 2018-2-8 10:02:41
// 配置multer
// 详情请见https://github.com/expressjs/multer
const storage = multer.memoryStorage()
const upload = multer({
storage: storage,
limits: {
fileSize: bytes('2MB') // 限制文件在2MB以内，或者2048KB
},
fileFilter: function (req, files, callback) {
// 只允许上传jpg|png|jpeg|gif格式的文件
var type = '|' + files.mimetype.slice(files.mimetype.lastIndexOf('/') + 1) + '|'
var fileTypeValid = '|jpg|png|jpeg|gif|'.indexOf(type) !== -1
callback(null, !!fileTypeValid)
}
})
module.exports = upload
config.js
const path = require('path')
module.exports = {
root: path.resolve(__dirname, '../'), // 根目录
// 七牛云 配置
serverUrl: 'static.yio.me', // 服务器地址
qiniu_config: {
// 需要填写你的 Access Key 和 Secret Key
accessKey: 'Access ',
secretKey: 'Secret Key',
bucket: 'yio1', // 空间名称
origin: ''
}
}
upload.js
const express = require('express')
const router = express.Router()
const qn = require('qn')
const upload = require('./multer')
const config = require('./config').qiniu_config
const serverUrl = require('./config').serverUrl
router.post('/upload', (req, res, next) => {
// 获取七九配置
let client = qn.create(config)
upload.single('img')(req, res, (err) => {
if (err) {
return res.send('文件上传失败!')
} else {
// 获取资源文件后缀名
let fileFormat = (req.file.originalname).split('.')
// 设置上传到七牛的文件名
let filePath = '/upload/' + req.file.fieldname + '-' + Date.now() + '.' + fileFormat[fileFormat.length - 1]
// 上传
client.upload(req.file.buffer, {
key: filePath
},
(err, result) => {
if (err) {
return res.send({
statu: -1,
result: '',
msg: '上传失败!' + err
})
}
return res.send({
statu: 1,
result: {
// 将保存路径传递给页面(我用的 markdon 编辑器)
path: serverUrl + filePath
},
msg: '上传成功!'
})
})
}
})
})
module.exports = router
upload.vue
<template>
<div class="upload">
<form action="/api/user/upload" method="post" enctype="multipart/form-data">
<!-- enctype 必须设置成 multipart/form-data-->
<h2>multer 上传文件</h2>
<input type="file" name="img" accept="image/png">
<input type="submit">
</form>
</div>
</template>
完结.
