一、概述
在项目开发中，很多时候用到七牛云对象存储来保存项目的静态文件，如视频，图片，大文件，等等。如果说项目文件涉及到用户隐私，那么我们就不应该使用公开读取的方式去存取文件，而是使用私有的方式去存取。参考链接:https://developer.qiniu.com/
假设:项目有这样需求,客户端上传私密图片到七牛云. 上传成功后,我们把文件的key键记录在数据库中,下次客户端需要读取图片时,业务服务器通过文件的key键获取临时链接,返回给客户端.
暂且不考虑服务器逻辑,下面是客户端上使用 JS SDK 上传私密文件的简单示例
二、具体流程
七牛云上传过程
首先看七牛云官方的一张图，了解七牛云文件上传的大致流程
- 首先，客户端需要向业务服务器发送请求，获取临时的上传凭证，这里叫做 uploadToken
- 然后，客户端获取上传凭证之后，可以使用上传凭证向七牛云服务器传文件。这里说的客户端，是Android，iPhone，或者Web浏览器。
- 最后，七牛云服务器会向项目的业务服务器发出回调，方便业务服务器做后续操作，不过，这个过程是可选的。也就是说，可以不设置回调
代码示例
我们假设服务器代码已经写好，这里暂且不考虑业务服务器的逻辑。我们就使用Web浏览器，以一个简单的HTML文件作为示例，使用JS SDK往七牛云服务器传文件。
- 我们使用CDN的方式，引入jQuery和七牛云JS SDK，如下代码
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
- 在表单里添加一个input用来选择本地文件，使用一个button用来执行取消上传操作，如下代码
<form style="width: 50%;margin: 0 auto">
<input type="file" id="selectFile" value="选择文件">
<button id="oncancel">取消上传</button>
</form>
- 监听input状态，当input内容有改变时，进行文件上传，如下代码
var subscription = null
$("#selectFile").change(function () {
console.log('文件状态有变化')
//文件对象
var file = this.files[0]
if (!file) return
//向业务服务器发送请求获取updateToken
$.post('https://www.test.com/api/qiniu/getUploadToken', {}, function (token) {
console.log('返回数据为uploadToken:' + token)
if (token) {
//提交文件到七牛云服务器
var observable = qiniu.upload(file, new Date().getTime(), token, {fname: file.name}, {useCdnDomain: true})
//设置监听者对象
var observer = {
next(res) {
console.log('总大小=>' + res.total.size + ',当前已上传大小=>' + res.total.loaded + ',当前进度=>' + res.total.percent)
},
error(err) {
// ...
},
complete(res) {
// ...
console.log('上传成功')
console.dir(res)
}
}
//上传文件
subscription = observable.subscribe(observer)
}
})
})
在以上代码中，可以看到，当监听到有文件添加到input标签之后，先发送一个post请求去服务器获取上传凭证，在实际项目中，应该要携带鉴权参数。
qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object)方法参数说明：
第1个参数：文件对象，
第2个参数：使用当前时间戳来作为文件的key，
第3个参数：业务服务器返回的上传凭证，
第4个参数：附加参数对象，fname 指定的是原文件名
第5个参数：配置对象，useCdnDomain: true代表使用cdn加速域名七牛云上传方法接收一个监听者对象， 在监听者对象的next回调方法中，接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、size、percent三个属性，提供上传进度信息。
在文件上传完成之后，回调complete方法，返回数据如下
hash: "FluHYkQWHigWGQLSe0w9-Jl6b7LA"
key: "1576488908539"
- 最后，我们提供一个取消上传的方法
$("#oncancel").click(function (event) {
//阻止默认事件
event.preventDefault()
//取消上传
subscription.unsubscribe()
})
三、总结
实际上，七牛云对象提供了多种语言版本的SDK，可根据实际需求去下载使用。以上是使用使用浏览器上传文件到七牛云对象存储的简单示例，全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七牛云上传示例</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
</head>
<body>
<form style="width: 50%;margin: 0 auto">
<input type="file" id="selectFile" value="选择文件">
<button id="oncancel">取消上传</button>
</form>
</body>
<script>
var subscription = null
$("#selectFile").change(function () {
console.log('文件状态有变化')
//文件对象
var file = this.files[0]
if (!file) return
//发送请求获取updateToken
$.post('https://www.test.com/api/qiniu/getUploadToken', {}, function (token) {
console.log('返回数据为updateToken:' + token)
if (token) {
//提交文件到服务器
var observable = qiniu.upload(file, new Date().getTime(), token, {fname: file.name}, {useCdnDomain: true})
//设置监听者对象
var observer = {
next(res) {
// 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、size、percent三个属性，提供上传进度信息。
console.log('总大小=>' + res.total.size + ',当前已上传大小=>' + res.total.loaded + ',当前进度=>' + res.total.percent)
},
error(err) {
// ...
},
complete(res) {
// ...
console.log('上传成功')
console.dir(res)
}
}
//上传文件
subscription = observable.subscribe(observer)
}
})
})
$("#oncancel").click(function (event) {
//阻止默认事件
event.preventDefault()
//取消上传
subscription.unsubscribe()
})
</script>
</html>
原创文章，禁止转载
