node koa2实现上传图片并且同步上传到七牛云存储


Posted in Javascript onJuly 31, 2017

因为升级到新的node版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得。

废话不多说,下面直接上代码,里面都有注释。

const Koa = require('koa');
const route = require('koa-route');
const serve = require('koa-static');
const inspect = require('util').inspect
const path = require('path')
const os = require('os')
const fs = require('fs')
const Busboy = require('busboy')
const qiniu = require('qiniu')
const qiniuConfig = require('./qiniuconfig')

 
const app = new Koa();

app.use(serve(__dirname + '/public/'));

 
// 写入目录
const mkdirsSync = (dirname) => {
 if (fs.existsSync(dirname)) {
  return true
 } else {
  if (mkdirsSync(path.dirname(dirname))) {
   fs.mkdirSync(dirname)
   return true
  }
 }
 return false
}

function getSuffix (fileName) {
 return fileName.split('.').pop()
}

// 重命名
function Rename (fileName) {
 return Math.random().toString(16).substr(2) + '.' + getSuffix(fileName)
}
// 删除文件
function removeTemImage (path) {
 fs.unlink(path, (err) => {
  if (err) {
   throw err
  }
 })
}
// 上传到七牛
function upToQiniu (filePath, key) {
 const accessKey = qiniuConfig.accessKey // 你的七牛的accessKey
 const secretKey = qiniuConfig.secretKey // 你的七牛的secretKey
 const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)

 const options = {
  scope: qiniuConfig.scope // 你的七牛存储对象
 }
 const putPolicy = new qiniu.rs.PutPolicy(options)
 const uploadToken = putPolicy.uploadToken(mac)

 const config = new qiniu.conf.Config()
 // 空间对应的机房
 config.zone = qiniu.zone.Zone_z2
 const localFile = filePath
 const formUploader = new qiniu.form_up.FormUploader(config)
 const putExtra = new qiniu.form_up.PutExtra()
 // 文件上传
 return new Promise((resolved, reject) => {
  formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {
   if (respErr) {
    reject(respErr)
   }
   if (respInfo.statusCode == 200) {
    resolved(respBody)
   } else {
    resolved(respBody)
   }
  })
 })

}

// 上传到本地服务器
function uploadFile (ctx, options) {
 const _emmiter = new Busboy({headers: ctx.req.headers})
 const fileType = options.fileType
 const filePath = path.join(options.path, fileType)
 const confirm = mkdirsSync(filePath)
 if (!confirm) {
  return
 }
 console.log('start uploading...')
 return new Promise((resolve, reject) => {
  _emmiter.on('file', function (fieldname, file, filename, encoding, mimetype) {
   const fileName = Rename(filename)
   const saveTo = path.join(path.join(filePath, fileName))
   file.pipe(fs.createWriteStream(saveTo))
   file.on('end', function () {
    resolve({
     imgPath: `/${fileType}/${fileName}`,
     imgKey: fileName
    })
   })
  })

  _emmiter.on('finish', function () {
   console.log('finished...')
  })

  _emmiter.on('error', function (err) {
   console.log('err...')
   reject(err)
  })

  ctx.req.pipe(_emmiter)
 })
}



app.use(route.post('/upload', async function(ctx, next) {

  const serverPath = path.join(__dirname, './uploads/')
 // 获取上存图片
 const result = await uploadFile(ctx, {
  fileType: 'album',
  path: serverPath
 })
 const imgPath = path.join(serverPath, result.imgPath)
 // 上传到七牛
 const qiniu = await upToQiniu(imgPath, result.imgKey)
 // 上存到七牛之后 删除原来的缓存图片
 removeTemImage(imgPath)
 ctx.body = {
  imgUrl: `http://xxxxx(你的外链或者解析后七牛的路径)/${qiniu.key}`
 }
}));
 
app.listen(3001);

console.log('listening on port 3001');

然后在同一级目录下,创建一个public文件夹,然后在下面新建一个 index.html,因为我们上面已经把这个文件夹设置为静态访问文件夹了, public/index.html 的代码为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="btn1" type="file" name="file"/> 
 <input id="btn2" type="submit" value="提交"/>
</body>
<script>
  
  var btn1 = document.querySelector('#btn1')
  var btn2 = document.querySelector('#btn2')
  var file = null
  btn1.addEventListener('change', function(e){
    file = e.target.files[0]
  })

  btn2.onclick = function(){
  var _data = new FormData();
  _data.append('file', file);
  xhr(_data)
  }

  var xhr = function(formdata){
    var xmlHttp = new XMLHttpRequest(); 

    xmlHttp.open("post","http://127.0.0.1:3001/upload", true); 
     
    xmlHttp.send(formdata);

    xmlHttp.onreadystatechange = function(){ 
     if(xmlHttp.readyState==4){ 
       if(xmlHttp.status==200){ 
         var data = xmlHttp.responseText; 
         console.log(data); 
       } 
     }
    }
  }
</script>
</html>

选择好图片,然后点击提交,就可以上传到你的七牛空间啦!

源代码在 github: https://github.com/naihe138/koa-upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 #Javascript
详解React中的组件通信问题
Jul 31 #Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 #Javascript
Angular.js中数组操作的方法教程
Jul 31 #Javascript
BootStrap导航栏问题记录
Jul 31 #Javascript
Angular4 中内置指令的基本用法
Jul 31 #Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
关于Python错误重试方法总结
2021/01/03 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
集体婚礼证婚词
2014/01/13 职场文书
家长给孩子的评语
2014/01/30 职场文书
行政管理专业求职信
2014/07/06 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
年终工作总结范文2014
2014/11/27 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
催款函范文
2015/06/24 职场文书
干部考核工作总结
2015/08/12 职场文书
班主任寄语2016
2015/12/04 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
python在package下继续嵌套一个package
2022/04/14 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby