携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言：

前一篇主要篇幅是CDN的概念以及七牛云的准备内容，当我们完成准备内容之后，我们可以开始着手实现文件上传，待文件上传到云空间中后，咋们最为简单的CDN加速基本就完成了。实现文件上传会从部署node.js服务器以及具体文件上传的方式两方面来分享。

部署本地Node.js服务器

部署服务器的原因是官方建议为了安全，token 最好是通过网络从服务端获取，当然node只是其他一个，还有以下多种方式任大家选择，大家可以按自己熟悉的去部署。相关文档：developer.qiniu.com/sdk#officia…

node.js服务器部署获取token步骤如下：

1. 在项目的src目录下创建相应文件夹

2.创建并配置config.js文件

const qiniu = require('qiniu')
const accessKey = 'your access key'
const secretKey = 'your secret key'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: '你所创建的空间的名称',
  expires: 7200 //凭证有效时间
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken
}

3.配置app.js文件

const express = require('express')
const cors = require('cors')
const app = express()
// 允许跨域
app.use(cors())
const qnconfig = require('./config.js')

//当请求成功时返回相应上传凭证
app.post('/token', (req, res, next) => {
  res.status(200).send(qnconfig.uploadToken)
})
PORT = 3002;
app.listen(PORT, () => {
  console.log(`this server are running on localhost:${PORT}!`)
})

具体文件上传操作

概述：

调用qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对象通过 subscribe 方法可以被 observer 所订阅，订阅同时会开始触发上传，同时返回一个 subscription 对象

上传图片至七牛的函数核心代码:

var error = function (err) {
  // 可自行编写相关处理...
  console.log("error", err);
};
var complete = function (res) {
  // 可自行编写相关处理...
  console.log("complete", res);
};
var next = function (response) {
  // 可自行编写相关处理...
  console.log("next", response);
};

// 订阅对象包含各个状态下的相应处理
var subObject = {
  next: next,
  error: error,
  complete: complete,
};

向node.js服务器发送获取上传凭证的请求

let uptoken = '';
const fortoken = (file) => {
  return new Promise((resolve, reject) => {
      // 对应之前部署的node.js服务器
    http({method: "post",url: "http://localhost:3002/token",
    data: { fileName: file.name },
    mode: "cors",withCredentials: false,
    })
      .then((response) => {
         //存储返回的上传凭证
        uptoken = response.data;
        //调用qiniu的upload方法  upload(file, key, token, putExtra, config)
        const observable = qiniu.upload("文件对象","文件名",uptoken);
        //开始上传文件
        const subscription = observable.subscribe(subObject);
        resolve(response.data);
      })
  });
};

实践操作

1.准备上传

2.上传完成（可见percent为100）

3.去七牛云对应空间看图片确实已经上传成功

注意

qiniu.upload(file, key, token, putExtra, config)方法参数的含义：

file: File 对象，上传的文件
key: 文件资源名，为空字符串时则文件资源名也为空，为 null 或者 undefined 时则自动使用文件的 hash 作为文件名
token: 上传验证信息，前端通过接口请求后端获得
putExtra和config是可选配置有兴趣可以自行查阅官方文档:developer.qiniu.com/kodo/1283/j…

若空间设置为公共，此处会有外链地址，copy即可访问上传的资源

关于使用七牛云实现CDN加速系列【二】实践篇

前言：