multer 文件上传七牛版

需要的模块

express, multer, qn, beytes

本地版参考

https://yio.me/qdkf/726.html

目录

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>

完结.

发表评论

电子邮件地址不会被公开。 必填项已用*标注