七牛云附件上传实战记录｜8月更文挑战

这是我参与 8 月更文挑战的第 1 天

七牛云图片上传

七牛云提供了免费的CDN存储空间。 我们可以利用七牛云提供的功能，自定义我们自己的图床，自定义我们应用的静态资源服务器等等。

上传静态资源分两种方式
1.前端上传
2. 服务器上传

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

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

一、前端上传

qiniu-js | 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

<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 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);