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

laznrbfe 发布于2019-08-20 18:23 / 3521人阅读

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

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




    
    Document

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

文章博客地址： http://blog.naice.me/articles

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

源代码在 github: https://github.com/naihe138/k...

云服务器 GPU云服务器七牛云存储图片上传远程服务器怎么保存到七牛云七牛上传图片七牛云图片存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84430.html

关于数据迁移，你应该知道的那些方法

摘要：数据迁移过程中的速率问题。关闭源站数据迁移典型案例剖析七牛客户陌陌的数据量非常大，如果采用常用的传输办法，整个迁移过程要耗时半年，并且会严重影响线上的业务。为此，七牛为陌陌制定了个性化的数据迁移方案。 showImg(http://sharlyne-lee.qiniudn.com/m1.png); 无论是计划拥抱云服务还是打算从正在使用的云服务切换到另外一家，这其中数据的迁移是很关键...

DDreach 2019-06-28 10:49 评论0 收藏0
关于七牛云正确使用姿势探索

摘要：，在后续测试时遇到一个诡异，当文件过大时，任务脚本上传到七牛云失败。当我遇到大文件无法上传到七牛云时，断点调试到这里，发现返回的是。后来还真被我找到了，七牛云官方提供一个脚本工具。业务场景需求我们项目有一个文件上传需求，需要从客户端上传到七牛云的对象存储和自己的应用服务器上。这里使用七牛云主要是实现下载分发。应用服务器需要留一份是因为后续需要做文件分析（并且是上传后需要立马分析出...

3fuyu 2019-07-01 12:39 评论0 收藏0
使用七牛前必须要知道和理解的

摘要：如果看完此文依然不解的还想使用七牛的，请站内信联系明月，我可以收费全套代劳，费用不高配置快速当天见效效果明显免费维护欢迎惠顾。最近明月使用七牛加速自己博客初见成效后，也分享了不少七牛方面的经验，很多站长也向明月咨询了七牛方面的问题，本着分享的精神，明月今天就当一次义务的七牛推广员给大家讲解一番。showImg(https://segmentfault.com/img/bVMhUH?w...

DevYK 2019-05-29 17:52 评论0 收藏0
使用七牛前必须要知道和理解的

摘要：如果看完此文依然不解的还想使用七牛的，请站内信联系明月，我可以收费全套代劳，费用不高配置快速当天见效效果明显免费维护欢迎惠顾。最近明月使用七牛加速自己博客初见成效后，也分享了不少七牛方面的经验，很多站长也向明月咨询了七牛方面的问题，本着分享的精神，明月今天就当一次义务的七牛推广员给大家讲解一番。showImg(https://segmentfault.com/img/bVMhUH?w...

Enlightenment 2019-06-21 16:10 评论0 收藏0
七牛云存储官方接口PHP版本

摘要：基于七牛云存储官方构建。使用此构建您的网络应用程序，能让您以非常便捷地方式将数据安全地存储到七牛云存储上。应用接入获取和要接入七牛云存储，您需要拥有一对有效的和用来进行签名认证。文件下载七牛云存储上的资源下载分为公有资源下载和私有资源下载。此 SDK 适用于 PHP 5.1.0 及其以上版本。基于七牛云存储官方API 构建。使用此 SDK 构建您的网络应用程序，能让您以非常便捷地方...

wwq0327 2019-07-01 14:17 评论0 收藏0