对接网易nos实现文件分片直传

我写博客都不太喜欢配图片, 主要是配置上图片的话很难管理那些图片, 第三方的图床也不太靠谱, 怕挂了然后九GG咯, 自己服务器呢又难的迁移, 速度还慢呢. 所以还是自己去申请一个对象储存来玩玩吧, 网易云呢我是很早以前申请的, 以前是50G的免费容量吧, 然后流量每个月多少来着反正我用不完那种. 废话不多说了, 申请认证账户那些九不多说, 我直接开始代码部分

首先看了下网易云nos文档, 还是老样子, 后端生成临时的token, 前端带上token上传, 相比于七牛就是他这需要把保存的对象名给生成到token中进行验证, 所以生成这个token只能上传一个文件, 倒是安全了许多嘛.

node 生成token

还是老样子, AppKey 还有一些必要参数base64编码后, HMAC-SHA1加上SecretKey加密在base64编码就行.
params

好了直接上代码, node加密还是要安装一个 crypto 加密库

1
npm install crypto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const crypto = require('crypto')
// 这里是我的_nos配置文件
const { _nos } = require('../config')

/**
 * @description 按照系统事件生成随机文件名
 * @param { string } type 需要上传的文件后缀
 * @returns 带日期路径的随机文件名
 */
function getFileName(type = 'png'){
  const Now = new Date()
  // return `${RandomId()}.${type}`
  return `${Now.getUTCFullYear()}-${Now.getMonth()+1}-${Now.getDate()}/${RandomId()}.${type}`
}

// 生成随机ID 懒得取啥名字咯...哈哈哈
const RandomId = len => Math.random().toString(36).substr(3, len)

//  emm. 获取一下get请求来的文件type
const { type } = ctx.query

const putPolicy = {
    "Bucket": _nos.bucket,
    "Object": getFileName(type),
    "Expires": ~~(Date.now()/1000) + _nos.exp // 配置文件的过期
  }
  // 这个不是必要, 考虑后期看吧, 写个可配置呗
  if(_nos.MimeLimit) putPolicy['MimeLimit'] = _nos.MimeLimit
  // 通过node的 buffer base64编码
  const encodedPutPolicy  = Buffer.from(JSON.stringify(putPolicy)).toString('base64')
  // 通过弄得的crypto加密并转base64
  const encodedSign   = crypto.createHmac('sha1', _nos.secretKey).update(encodedPutPolicy).digest().toString('base64')
  // 最后想加得到签名, 也就是token
  const token = `UPLOAD ${_nos.accessKey}:${encodedSign}:${encodedPutPolicy}`

就普通的加密编码, 现在的这几家签名方案真的一点都没啥变化, 接入的多了完全真的就感觉很简单咯.

后端获取并拼接上传地址

接着往下翻文档, enn 需要请求地址获得那啥上传的api接口…, 还是后端搞这些, 连着签名一起给前端吧, 这样的话那就还需要一个axios来发起网络请求

1
npm insatll axios
1
2
3
4
5
6
7
8
9
10
11
const http = require('axios)
...
http.get('http://lbs-eastchina1.126.net/lbs', { params:{ version: '1.0', bucketname: _nos.bucket} }).then(({data})=>{
  /** data的数据格式就是这个样子 
   * "lbs": "http://106.2.45.248/lbs",
   *  "upload": [
   *    "http://116.211.99.244",
   *     "http://106.2.45.250"
   *  ]
   * */ 
})

这个地址我们也获取到了, 现在就就这看文档吧
yrvp4xckb9
8mi8tewmu

注意上面我标记那有个坑, 他说的用那个地址, 其实不然, host应该为上面我们通过接口获得的两个地址, 优先取第一个, 我在这就试了很多遍, 结果还是踩了好几次坑才慢慢搞好的, 就按照这个来吧, 讲真他这个文档坑真的挺多的, 百度也没啥东西, 还好多试试就能解决.

我这里的想法是后端直接把地址拼接好, 然后前端直接往地址上put文件就好, 先我们来搞一下普通的小文件上传, 那些非必要的参数就先不管

1
2
3
4
5
6
7
8
9
10
11
12
...
.then(({data})=>{
  /** data的数据格式就是这个样子 
   * "lbs": "http://106.2.45.248/lbs",
   *  "upload": [
   *    "http://116.211.99.244",
   *     "http://106.2.45.250"
   *  ]
   * */ 
  const upload_url = `${data.upload[0]}/${putPolicy.Bucket}/${putPolicy.Object}?complete=true&version=1.0`
})

按照文档上来上面那是一点毛病都没有, 但是按照文档上来你真的就输了, 注意下面这句话

该分块在整个文件中的偏移，如果断点续传，可以使用查询接口获取offset ，如返回CommandNotFound，建议加offset=0

反正我一上传就给我报 CommandNotFound 这个参数本来是他分片才需要的, 但是就算你传一个问题也会给你报错, 所以默认还是带上这个把

1
2
3
...
const upload_url = `${data.upload[0]}/${putPolicy.Bucket}/${putPolicy.Object}?complete=true&version=1.0&offset=0`
ctx.body = { upload_url, token }

小文件直传

OK, 有了这个地址和token我们就可以直接上传文件到nos里面了, 下面我就直接写操作file的内容了, 至于怎么获得input的files可以看我以前写的那个axios上传文件到七牛云那篇文章.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 我们这里还是导入axios来上传
import http from 'axios'
...

/**
 *
 * @description 上传文件
 * @param {Object: {}} file 上传的文件
 * @param {Object: {}} onError 上传失败的回调
 * @param {Object: {}} onSuccess 上传成功的回调
 * @param {Object: {}} onProgress 上传进度回调
 * @returns 
 */
function requestUpload({ file, onError, onSuccess, onProgress })){

  // 先来获得文件的后缀, 也就是格式, 去请求得到token嘛
  const type = (({name})=>{
    let arr = name.split('.')
    return arr[arr.length-1]
  })(file)
  http.get('/nos?type='+type).then(({data: { upload_url, token }})=>{
    axios({
      url: upload_url,
      method: "POST",
      headers: {'x-nos-token': token },
      data: file,
      timeout: 0,
    }).then(({data})=>{
      if(data.callbackRetMsg) onError(data.callbackRetMsg)
      else{
        this.emitInput(file_url)
        onSuccess(file_url)
      }
    })
  })
}

分片上传的实现

好像就这样就完成了嘛, 是不是非常简单嘛, 其实就是这样简单, 不过这里进度我没有写, 还有实测这b玩意儿大于4m就传不上去咯, 单片文件只能传4m一下, 所以我们就需要搞那个分片上传了嘛, 首先我们来瞅瞅分片上传需要的参数

offset    该分块在整个文件中的偏移，如果断点续传，可以使用查询接口获取offset ，如返回CommandNotFound，建议加offset=0
complete 是否是最后一片，如果是则为true，不是为false
context    上传上下文。本字段是只能被上传服务器解读使用的不透明字段，上传端不应修改其内容。用户不带此参数表示是第一次上传，之后上传剩余部分数据都需要带上这个参数。 context对应的桶名或者对象名不匹配返回400 code。

这个样子的话, 我们接口就还需要改动一下嘛..

1
2
3
4
...
// 其实改动真不大, 就把这两个参数丢给前端去拼
const block_url = `${data.upload[0]}/${putPolicy.Bucket}/${putPolicy.Object}?version=1.0&`
ctx.body = { upload_url, token, block_url }

接口改造完成, 可以接着来前端实现了, 先理一下思路, 他这个续传需要一个第一次上传给的context, 所以开始就不能并发调用, emmm, 至于后面的全并发调用还是不搞了把, 进度不好控制. 那就递归循环调用, 一片一片的接力赛慢慢上传. ok, 那就需要封装一个方法来调用自身嘛

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
...
function requestUpload({ file, onError, onSuccess, onProgress }){
  // 这里我们定义一下每块文件的大小, 我这是4m
  const block_size = 1024*1024*4
  // 计算下需要几次传上去
  const len = Math.ceil(file.size / block_size)
  const type = (({name})=>{
    let arr = name.split('.')
    return arr[arr.length-1]
  })(file)

  http.get('/tia/nos?type='+type).then(({data: { token, block_url}})=>{
    // 这里我们直接定义下上传他返回的参数, 直接就可以拿来计算了嘛
    const upload = ({context, offset = 0 }) => {
      // 下个文件块位置 看看文件大小跟文件快便宜量谁小点
      const next_size = Math.min(offset + block_size, file.size)
      // 是否最后一个文件
      const complete = next_size == file.size
      // 切割本次上传的文件  只要一次那还切割啥
      const fileData = len === 1?file:file.slice(offset, next_size)
      // 发起上传
      axios({
        url: block_url,
        params: { offset, complete, context },
        method: "POST",
        headers: {'x-nos-token': token },
        data: fileData,
        // 超时定义为0, 代表无限把, 我开始有超时的时候就自动给断了
        timeout: 0,
      }).then(({data})=>{
        if(data.callbackRetMsg) onError(data.callbackRetMsg)
        // 是不是最后一次上传, 不是那就调起自身上传下一块
        else if(!complete)return upload(data)
        else{
          this.emitInput(file_url)
          onSuccess(file_url)
        }
      }).catch(onError)
    }
    // 第一次上传, 注意要带个对象进去, 不然...要出问题的
    upload({})
  })
}

实在是炒鸡简单啦有某有, 不过实现起来还是不容易, 坑还是蛮多的, 就比如最后第一次上传我没带对象,,,,, 里面的参数一直取不到值, 一直报啥未定义….emmm. 最后好像我们还差一个进度嘛

进度实现

进度的话去看看axios的文档就晓得咯, 就是一个事件函数来处理的 

// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
}
1
2
3
4
5
6
7
8
9
10
11
12
...
axios({
  url: block_url,
  params: { offset, complete, context },
  method: "POST",
  ...
  // loaded: 上传了多少咯, total: 总共上传了多少咯, lengthComputable: 支持上传进度不
  onUploadProgress: (({ loaded, total , lengthComputable })){
    const p = loaded/ total *100    // 是这样的没错啊, 但是我们这不需要计算本次上传的进度嘛,...hahah
    if(lengthComputable) onProgress((offset+ loaded) / file.size * 99)
  }
})

emmm. 好像还没有那个啥对象的地址, 其实就那个生成的ObjectName加上配置的地址

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Begin with interest <br> and be loyal to technology <br><br> QiaTia