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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php 中英文语言转换类
2011/09/07 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php简单统计中文个数的方法
2016/09/30 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
举例讲解Python中is和id的用法
2015/04/03 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
中学教师管理制度
2014/01/14 职场文书
平安建设实施方案
2014/03/19 职场文书
南京导游词
2015/02/03 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
冰雪公主观后感
2015/06/16 职场文书