node koa2实现上传图片并且同步上传到七牛云存储
因为升级到新的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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
阿里大于短信验证码node koa2的实现代码(最新)
今天给大家分享一下最新版阿里大于的短信验证码在node koa2的实现,还是有很多坑需要注意. 首先需要在阿里云注册账号,并获取阿里云访问秘钥,在控制台完成模板与签名的申请获得调用接口的必备参数.具体方法参见短信发送api 步骤一:安装npm包 npm install @alicloud/sms-sdk --save 步骤二:代码实现.常见一个sendmsg.js的controller /** * 引用sdk */ const SMSClient = require('@alicloud/sms
-
nodejs6下使用koa2框架实例
koa2里面使用ES7的语法,如async.await所以需要运行在node7.6之后:但在node7.6之前也可以利用babel是的koa2可以运行. 首先项目中安装babel,和babel的几个模块: npm install babel babel-register babel-preset-env --save 然后在入口文件中引入'babel-register'模块 require('babel-register'); 而后引入业务代码: require('./server.js');
-
Springboot实现阿里云通信短信服务有关短信验证码的发送功能
前言 短信验证码是通过发送验证码到手机的一种有效的验证码系统.主要用于验证用户手机的合法性及敏感操作的身份验证. 现在市面上的短信服务平台有很多.大家在选择的时候未免会有些不好抉择.本人建议选择短信服务商应遵循以下几点: 服务商知名度高,业务流量大.(这样的平台可信度高) 服务稳定,不能经常宕机.(保证自身业务的流畅运行) 文档全面详细.(没文档怎么玩?) 最近的一个项目中,注册和修改密码时需要用到短信验证码校验手机号的功能.本人也是对比几家后,直接选择阿里云通信的短信服务.(本身项目服务器也是
-
阿里云PHP SMS短信服务验证码发送方法
开通SMS服务 首先去这个网站开通阿里云的SMS短信服务:https://www.aliyun.com/product/sms?spm=5176.8142029.388261.295.vU5T5g 创建签名.模板 要使用短信服务器需要先创建签名和模板,并提交给阿里云审核通过才可以正常使用短信服务. 创建签名 创建签名的时候注意一下签名名称,其他的话就不累赘了. 记住签名名称 现在请记住你创建的签名名称,一会在代码中需要使用. 创建模板 创建模板也很简单,阿里云已经把要如何填写写的很清楚了. 查看
-
Node.js环境下Koa2添加travis ci持续集成工具的方法
前言 因为最近使用koa2做项目测试开发,所以想整合下travis ci,网上资料也比较少,于是自己就整了个,做个记录.分享出来供大家参考学习,下面来看看详细的介绍吧. 方法如下: 先来看下travis.yml的配置 language: node_js node_js: - "6" before_script: - ./node_modules/.bin/knex migrate:latest --knexfile='./app/knexfile.js' script: - npm r
-
nodejs接入阿里大鱼短信验证码的方法
之前做过nodejs接入阿里大鱼短信验证码的方法,最近需要回顾,就顺便发到随笔上了 1. 阿里云上申请accessKey 如果已经申请过了,则可以直接使用.否则,首先点击右上角个人信息下拉菜单中的accessKeys进行申请. 2. 阿里云上开通短信服务 阿里大于的短信验证码服务已经并入阿里云中,通过阿里云的控制台->产品与服务->短信服务(在D字头中)进入. 按照阿里云提示的步骤操作,申请短信签名和短信模板,等待审核通过.记录下模板的id. 3. 使用apis-aliyun发送验证码 ```
-
node koa2实现上传图片并且同步上传到七牛云存储
因为升级到新的node版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得. 废话不多说,下面直接上代码,里面都有注释. const Koa = require('koa'); const route = require('koa-route'); const serve = require('koa-static'); const inspect = require('util').inspect const path = req
-
Python的Django中将文件上传至七牛云存储的代码分享
最近在写的一个django小项目需要实现用户上传图片的功能,使用到了七牛云存储,特此记录下来.这里我使用的七牛python SDK 版本是7.0.3,函数使用上可能会与旧版有些不同. 原本文件上传需要先把文件上传到自己的业务服务器,再从业务服务器上传到云存储.现在七牛的表单上传可以直接把文件上传到七牛,不再需要业务服务器的中转,节省了流量成本,降低了业务服务器的压力.而且通过设置,还可以在文件上传完成后让客户端自动重定向到一个上传成功的结果页面.这里我就是使用了七牛的表单上传. 表单上传 用户上
-
本地文件上传到七牛云服务器示例(七牛云存储)
复制代码 代码如下: # _*_ coding: utf-8 _*_#---------------------------------------# 程序:把本地文件上传到七牛云服务器# 版本:0.1# 作者:liu jia# 日期:2014-01-07# 语言:Python 2.7#--------------------------------------- import qiniu.confimport sysimport os#登录后从#https://portal
-
定时备份 Mysql并上传到七牛的方法
多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份.xtrabackup 增量逻辑备份等. 常见的数据存储方式有,本机存储.FTP 上传到远程服务器.云存储(如阿里云OSS.七牛云存储等).甚至本地也行. 我们可能不想每次都手动去备份,也不想每次都那么耗时间的去下载,也不想就放在服务器上丢了,因为我们需要异地备份.那我们可以尝试,写个脚本定时备份数据
-
node+axios实现服务端文件上传示例
目录 一.接口文档介绍 二.文件上传 2-1.初始化项目 2-2.安装插件依赖 2-3.上传核心代码 2-4.执行脚本 最近调研企业wx集成H5应用,其中有一个发送图文消息,需要上传图片到临时素材库.之前做过文件上传到阿里云.七牛云都是服务端提供封装好的文件上传接口,在客户端使用ajax的方式上传.所以就来踩踩坑,使用node+axios实现服务端文件上传. 一.接口文档介绍 请求方式:POST(HTTPS) 请求地址:https://qyapi.weixin.qq.com/cgi-bin/me
-
node+express+axios实现单文件上传功能
本文实例为大家分享了node+express+axios实现单文件上传的具体代码,供大家参考,具体内容如下 1.安装依赖 在node服务端安装依赖 cnpm i multer --save 2.后端代码 var express = require('express'); var router = express.Router(); //上传商品图片 var multer = require('multer'); var fs = require('fs'); var path = require
-
PHP上传图片时判断上传文件是否为可用图片的方法
本文实例讲述了PHP上传图片时判断上传文件是否为可用图片的方法.分享给大家供大家参考,具体如下: 这里利用getimagesize函数: function isImage($filename) { $types = '.gif|.jpeg|.png|.bmp'; //定义检查的图片类型 if(file_exists($filename)) { $info = getimagesize($filename); $ext = image_type_to_extension($info['2']);
-
JS实现多张图片预览同步上传功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 2017/5/10. */ $(document).ready(function($) { function changef(which,bulk,name_n){ var bulka = bulk; var thisid = which.attr("id"); var f = which.prop ('files')[0]; var filename = f.name; va
-
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能.分享给大家供大家参考,具体如下: jquery上传文件用的formdata,上传进度条需要添加xhr的onprogress html代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
-
node.js express框架实现文件上传与下载功能实例详解
本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.