七牛云对象存储JS SDK怎样上传私密文件

最新推荐文章于 2023-12-04 09:40:53 发布

极客开发者

最新推荐文章于 2023-12-04 09:40:53 发布

阅读量604

点赞数

分类专栏：前端开发笔记文章标签：七牛云

本文链接：https://blog.csdn.net/qq_34330286/article/details/103568955

版权

前端开发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

七牛云对象存储JS SDK怎样上传私密文件

一、概述

在项目开发中，很多时候用到七牛云对象存储来保存项目的静态文件，如视频，图片，大文件，等等。如果说项目文件涉及到用户隐私，那么我们就不应该使用公开读取的方式去存取文件，而是使用私有的方式去存取。参考链接:https://developer.qiniu.com/

假设:项目有这样需求,客户端上传私密图片到七牛云. 上传成功后,我们把文件的key键记录在数据库中,下次客户端需要读取图片时,业务服务器通过文件的key键获取临时链接,返回给客户端.

暂且不考虑服务器逻辑,下面是客户端上使用 JS SDK 上传私密文件的简单示例

二、具体流程

七牛云上传过程

首先看七牛云官方的一张图，了解七牛云文件上传的大致流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BX1Wo8D2-1576497311222) 在这里插入图片描述

首先，客户端需要向业务服务器发送请求，获取临时的上传凭证，这里叫做 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>