七牛云上传静态资源

七牛云

七牛云提供了免费的CDN存储空间。
我们可以利用七牛云提供的功能，自定义我们自己的图床，自定义我们应用的静态资源服务器等等。
上传静态资源分两种方式：1.前端上传 2. 服务器上传

接下来我将参考七牛云官网SDK文档，分别实现两种上传方式。

准备工作： 先注册一个七牛帐号（注册地址），并登录控制台获取一对有效的 AccessKey 和 SecretKey（获取地址）。

一、前端上传

JavaScript-Sdk文档

1. 引用

npm install qiniu-js
import * as qiniu from ‘qiniu-js’

2. 使用说明

qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。

3. 代码

const observable = qiniu.upload(file, key, token, putExtra, config)；
const observer = {
  next(res){
    // ...
  },
  error(err){
    // ...
  },
  complete(res){
    // ...
  }
}
const subscription = observable.subscribe(observer) // 上传开始
// or
const subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消

file: File对象
key: 文件名称
token： 需要后端配合，可以参考后面后端服务代码中获取token部分代码。
config，putExtra 配置参考下图

二、后端上传

1.Java

Maven

<dependency>
  <groupId>com.qiniu</groupId>
  <artifactId>qiniu-java-sdk</artifactId>
  <version>[7.2.0, 7.2.99]</version>
</dependency>

1. 获取token

@RestController
@RequestMapping("/qiniu")
public class UtilController {
    public String accessKey = "B_4zonc-5muZd9dijUnUKrdxvBJ0-hdUYz5fWU8p";
    public String secretKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxx";
    public String bucket = "levenx";

    @GetMapping("/token")
    public Result uploadToken() {
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        return Result.newResult(upToken);
    }

}

2.Node

NPM

 npm install qiniu

1. 获取token

var accessKey = 'your access key';
var secretKey = 'your secret key';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
  scope: bucket,
  expires: 7200
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);