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

我会带着你远行 2022-02-24 12:22 480阅读 0赞

因为升级到新的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>

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

文章博客地址： [http://blog.naice.me/articles][http_blog.naice.me_articles]

ps: 如果对你有帮助请随手丢一个 start 哦

源代码在 github: [https://github.com/naihe138/k...][https_github.com_naihe138_k...]

[http_blog.naice.me_articles]: http://blog.naice.me/articles
[https_github.com_naihe138_k...]: https://github.com/naihe138/koa-upload

发表评论取消回复

表情：

评论列表（有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS七牛云上传图片

以前上传图片都是通过form表单提交上传文件类型数据，这次的后台有点逗逼用起了第三方，我也是呵呵了，因此找了一下文档，第三方SDK集成我就不多说了，毕竟都是按照人家的步骤来就行

约定不等于承诺〃/ 2023年10月17日 15:23/ 0 赞/ 149 阅读

相关前端Vue上传图片到七牛云&后端Django上传图片到七牛云

目录前言上传方式 Vue上传图片到七牛云 Django上传图片到七牛云前言在开发项目的时候，经常会用

落日映苍穹つ/ 2023年02月14日 07:48/ 0 赞/ 79 阅读

相关 egg,七牛云上传图片

这是我的service 文件， const Service = require('egg').Service const qiniu = require('q

小鱼儿/ 2022年11月30日 12:43/ 0 赞/ 252 阅读

相关 html页面上传图片到七牛云。javaweb上传图片到七牛云

目的：使用html页面上传图片到七牛云。（使用了springmvc框架）准备工作： 1、springmvc搭建：[https://blog.csdn.net/

你的名字/ 2022年05月16日 02:06/ 0 赞/ 422 阅读

相关 Vue上传文件/图片到七牛云

目的：使用 vue 上传文件/图片到七牛云说明： 1、前台使用vue，后台用 java 传递一个 token。 2、token ：这个相当于

客官°小女子只卖身不卖艺/ 2022年05月09日 05:56/ 0 赞/ 581 阅读

相关 Django上传图片到七牛云

七牛云存储介绍：七牛云存储是一个集图片、视频对象存储为一体的网站。并且他上面集成了cdn加速服务，图片处理（加水印，图片裁剪）等功能，对于一些想要快速开发产品，

旧城等待，/ 2022年03月28日 02:49/ 0 赞/ 358 阅读

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

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

我会带着你远行/ 2022年02月24日 12:22/ 0 赞/ 481 阅读

相关 Typora+PicGo+七牛云实现图片上传存储

目录一、概述二、配置七牛云图床 1. 注册七牛云 2. 配置存储空间 2.1 新建空间 2.2 获取空间信息三、配置PicGo 1. 下载安装 2

落日映苍穹つ/ 2021年09月21日 13:10/ 0 赞/ 553 阅读

相关 Django七牛云图片上传

Django七牛云图片上传参考文档：七牛云官网： https://www.qiniu.com/ 插件下载地址及使用

超、凢脫俗/ 2021年09月17日 16:18/ 0 赞/ 497 阅读

相关七牛云图片上传

七牛云图片上传 > 可查看七牛云上传图片的SDK from flask import Flask, render_template, request, json

痛定思痛。/ 2021年09月17日 16:08/ 0 赞/ 475 阅读