上传文件到七牛空间

服务端进行上传

服务端将图片源传递到七牛，这种方式的流程是

1 前端将图片传到自己的服务器 2 在server将文件传递到七牛

• API

前端

需要注意，要使用 formData 格式进行文件上传， 关于 formData

document.querySelector('input').onchange = () => {
  const file = document.querySelector('input').files[0]

  let formData = new FormData()
  formData.append('file', file)

  // fetch调用接口
  fetch(path, {
    body: formData,
    credentials: 'same-origin',
    method: 'POST'
  })
}

server 接口部分

• 基本参数

const bucket = 'cancan'
const accessKey = '2LC7KPjwnYdxxxc'
const secretKey = 'SXrxxx'
const domain = 'http://pq3xxxdn.com'

• 获取token

function get_token () {
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const policyParams = { scope: bucket }
  const putPolicy = new qiniu.rs.PutPolicy(policyParams);
  const uploadToken = putPolicy.uploadToken(mac);
  return uploadToken
}

• 拿到文件path之后进行七牛上传

async function uploadFile(localFile, key) {
  const uploadToken = get_token()

  const config = new qiniu.conf.Config();
  // 空间对应的机房
  config.zone = qiniu.zone.Zone_z0;

  const formUploader = new qiniu.form_up.FormUploader(config);
  const putExtra = new qiniu.form_up.PutExtra();

  return new Promise((resolve, reject) => {
    // 文件上传
    formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {
      if (respErr) {
        reject('error')
      }
      if (respInfo.statusCode == 200) {
        const { key } = respBody
        resolve(`${domain}/${key}`)
      } 
    });
  })
}

• 接口

router.post('/upload', async (ctx) => {
  // 获取到上传到服务器的文件信息
  const { img } = ctx.request.files
  // path 拿到临时文件地址
  const { path } = img

  // key 是给图片的命名
  const key = Math.random() * 100 + '.png'

  const result = await uploadFile(path, key)

  ctx.body = result
})

遇到的问题

• post 接口 始终无法解析到file参数

后来发现是因为 中间件只使用了 koa-bodyparser， 一般图片上传使用的是 koa-multer，可以使用 koa-body来代替这两个

参考文章

• 临时文件占用大量磁盘空间

可以看到，在将文件上传到服务器的时候，会创建一个临时文件- 接口中解析的那个 path

对于服务器，可以写一个定时的脚本去清除这些文件。或者我们在脚本增加一段逻辑，在成功上传到七牛之后，手动将临时文件进行删除

fs.unlink(path, (err) => {
  if (err) throw err;
  console.log('文件已删除', path);
})

• git地址 - server
• git地址 - html

前端直接上传

项目中的例子涉及到的图片上传，都是将文件上传到服务器然后再去传到七牛空间，这种操作方式，相当于在自己的服务器做了一层中转站。开发者可以在中转站对图片做一些处理然后在传到七牛空间。但是有一些缺点

• 内存占用量增大

• 临时文件占用磁盘空间，需要每次上传之后需要进行文件删除

如果开发中不需要中转站，可以考虑直接从前端将图片上传到七牛空间

参考七牛的API文档，基本可以涉及到的是

• 上传凭证的生成

• 前端文件上传

• 区域

• 上传策略参数设置

获取上传凭证 token

router.get('/qiniu', async (ctx, next) => {
  const bucket = 'activity'
  const accessKey = '2LCxxxrxxx'
  const secretKey = 'SXrdqdvxxx'

  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const policyParams = { scope: bucket }
  const putPolicy = new qiniu.rs.PutPolicy(policyParams);
  const uploadToken = putPolicy.uploadToken(mac);
  ctx.body = uploadToken
})

前端上传代码

• base64转 blob

    function base64ToBlob(dataurl) { 
      var arr = dataurl.split(','), 
      mime = arr[0].match(/:(.*?);/)[1], 
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n); 
      while (n--) { 
        u8arr[n] = bstr.charCodeAt(n); 
      } 
      return new Blob([u8arr], { type: mime }); 
    }

• 基本参数

// 这个token 就是 server接口返回的token
const token = '2LC7KTxxx'

const config = {
  useCdnDomain: true,
  region: qiniu.region.z1
};

const putExtra = {
  fname: "",
  params: {},
  mimeType: [] || null
};

• 核心上传

const inputTarget = document.querySelector('input')
inputTarget.onchange = (data) => {
    const imgfile = inputTarget.files[0]
   
    const reader = new FileReader();
    reader.readAsDataURL(imgfile);
    reader.onload = function (e) {
      const urlData = this.result;
      const blobData = base64ToBlob(urlData)
      
      // 这里第一个参数的形式是blob
      const observable = qiniu.upload(blobData, 'filename.png', token, putExtra, config)
      
      const observer = {
        next(res) {console.log(res)},
        error(err) {console.log(err)},
        complete(res) {console.log(res)}
       }
       // 注册observer 对象
      observable.subscribe(observer)
    }
    
}

文件就可以被传到七牛了

可以看到这里返回的是一个hash和key，图片最后完整的访问路径，是你的七牛上配置的域名+key

在七牛创建一个新空间的话，会提供一个30天的免费域名可以使用

• git地址 - server

• git地址 - html

遇到的问题

• cdnUphost 解析失败

原来是把

 const config = {
    useCdnDomain: true,
    region: 'qiniu.region.z0'
 }

这里的region 写错了，不应是字符串，就是一个七牛的变量

 const config = {
    useCdnDomain: true,
    region: qiniu.region.z0
 }

这个参数是取决于你的空间存储区域选择的是哪里

对照文档 区域 进行z0 z1的选择

• 图片上传之后却无法读取，显示已损坏

是因为第一次的时候，直接将 input的files[0] 值上传, 这里与文档要求的参数格式不一致 文档里对这个参数的要求是blob，所以记得这里需要转化一下文件格式

以前的demo写的一直失败就搁置了，今天重新跑了一次，再次吐槽七牛的文档，写的真是让人头大

编写 webpack 上传七牛的插件

在开发中，有使用一个webpack的配置， qiniu-webpack-plugin

参照这个的使用方式，另外写一个上传plugin

涉及到的一些文档

• webpack plugin API

• webpack plugin config

plugin 使用

    // 这个是编译文件编译到的文件夹
    const filePath = path.resolve(__dirname, 'public')
    
    new QiuniuUploadPlugin({
      bucket,
      accessKey,
      secretKey,
      domain,
      path: filePath
    })

类的实现

这个的逻辑大部分和从后端直接上传到七牛有重合，这里只把另一部分写出来

• 大致实现

class QiuniuUploadPlugin {
  constructor () {...}
  
  uploadQn (filename) {...}
  
  apply (compiler) {
    const pluginName = 'QiuniuUploadPlugin'
    // 事件钩子
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log("webpack 构建过程开始！")
    });

    // afterEmit - 生成资源到 output 目录之后将触发  异步钩子 - tapPromise
    compiler.hooks.afterEmit.tapPromise(pluginName, (compilation) => {
      let { assets } = compilation
      // assets 这里拿到的assets是一个对象 key是文件名 value是相关关参数 我们只需要key
      // assets -->>>  { 'index.js' : xxxx }

      // 遍历所有的文件名 进行七牛的上传
      const allUplaod = Object.keys(assets).map((item) => {
        return this.uplaodQn(item)
      })

      return Promise.all(allUplaod)

    })
  }
}

• git - webpack

• git - plugin具体实现