七牛上传文件（JS实现）

柔光的暖阳◎ 2022-08-14 04:46 134阅读 0赞

**写在前面：** 本人是个新人，很多说法或者写法不正确不严谨，请见谅！  
**未写前的迷茫：** 在七牛官网实例中可以很正常的使用上传功能，但是将文件以及资源下载到本地就不能上传了，报“格式错误”、“媒体类型错误”等，也不知道是什么原因导致的。后来看了uptoken比较重要，自认为是那里的原因，但是具体是怎么回事还没弄明白。后经过师父指点，需要服务器提供uptoken，加之在七牛文档中心查阅了相关的上传设置，才知道uptoken是业务服务器返回到客户端以供上传文件到七牛的上传凭证。uptoken主要是通过七牛SDK构造。并且也学习到uptoken的构造需要由AccessKey、SecretKey、bucketName，而且这些是需要自己在官网去注册申请，在之前这些都不知道，导致没办法进行下去。

**七牛上传简介：**官方文档地址：http://developer.qiniu.com/docs/v6/sdk/javascript-sdk.html

功能包括：

上传

*  html5模式大于4M时可分块上传，小于4M时直传
 *  Flash、html4模式直接上传
 *  继承了Plupload的功能，可筛选文件上传、拖曳上传等
 *  下载(公开资源)

数据处理（图片）

*  imageView2（缩略图）
 *  imageMogr2（高级处理，包含缩放、裁剪、旋转等）
 *  imageInfo （获取基本信息）
 *  exif （获取图片EXIF信息）
 *  watermark （文字、图片水印）
 *  pipeline （管道，可对imageView2、imageMogr2、watermark进行链式处理）

业务流程：

一般  客户端（终端用户） => 业务服务器 => 云存储服务

缺点：

1.  多了一次中转的上传过程，同数据存放在用户的业务服务器中相比，会相对慢一些；
2.  增加了用户业务服务器的负载，消耗了带宽，占用了磁盘，降低了服务能力；
3.  增加了用户的流量消耗，来自终端用户的上传数据进入业务服务器，然后再次上传至云存储服务，净增一倍流量。

更改  客户端（终端用户） => 七牛 => 业务服务器  
优点：  
客户端（终端用户）直接上传到七牛的服务器。通过DNS智能解析，七牛会选择到离终端用户最近的ISP服务商节点，速度会相比数据存放在用户自己的业务服务器上的方式更快。而且，七牛云存储可以在用户文件上传成功以后，替用户的客户端向用户的业务服务器发送反馈信息，减少用户的客户端同业务服务器之间的交互。  
  
**实现步骤：**  
1 环境准备  
 添加maven依赖

<dependency>
                <groupId>com.qiniu</groupId>
                <artifactId>sdk</artifactId>
                <version>6.1.7</version>
            </dependency>

2 初始化

要接入七牛云存储，您需要拥有一对有效的 Access Key 和 Secret Key 用来进行签名认证。

2.1注册七牛开发者账号，查看AccessKey和SecretKey

![Center][]

2.2 新建一个空间，取一个自己空间的名称niu8

![Center 1][]

2.3在controller中添加一个方法用来生成uptoken，uptoken可简单理解为七牛上传的凭证，JS在设置的时候需要这个。

@RequestMapping(value = "uptoken", method = RequestMethod.GET)
        @ResponseBody
        public ResponseEntity<Object> makeToken() {
            //todo
            // 需要修改AK、SK、bucketName
            Config.ACCESS_KEY = "FhR6piyeRd07vhonfdIePWPgeIrTXmOXyeZx8gKm";
            Config.SECRET_KEY = "goerw3ZniGNmrpVbUuyhI_-u2VFEzUKYY6OZ5lRj";
            Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);
            String bucketName = "niu8";
            PutPolicy putPolicy = new PutPolicy(bucketName);
            try {
                String uptoken = putPolicy.token(mac);
                JSONObject jsonObject=new JSONObject();
                jsonObject.put("uptoken",uptoken);
                return new ResponseEntity(jsonObject, HttpStatus.OK);
            } catch (AuthException e) {
                e.printStackTrace();
                return new ResponseEntity(null, HttpStatus.BAD_REQUEST);
            } catch (JSONException e) {
                e.printStackTrace();
                return new ResponseEntity(null, HttpStatus.BAD_REQUEST);
            }
        }

说明：

1.  这里的controller的请求映射为/container,请求的方法的映射为uptoken，因此页面请求的路径为$(ctx)/container/uptoken
    
        <span style="font-family:Microsoft YaHei;font-size:12px;">@RequestMapping(value = "/container")</span>
2.  代码里面主要设置AK、SK、bucketName，然后通过七牛SDK API构造一个uptoken，并将其封装为JSON格式。

3 导入七牛JS上传例子需要的css和js

4 页面主要代码

<span style="white-space:pre">		</span><%--start新增七牛上传--%>
                        <div class="">
                            <div class="text-left col-md-12 wrapper">
                                <input type="hidden" id="domain" value="http://niu8.qiniudn.com/">
                                <input type="hidden" id="uptoken_url" value="${ctx}/container/uptoken">
                            </div>
                            <div class="body">
                                <div>
                                    <div id="container">
                                        <a class="btn btn-default btn-md " id="pickfiles">
                                            <i class="glyphicon glyphicon-plus"></i>
                                            <sapn>上传版本文件</sapn>
                                        </a>
    
                                        <div id="html5_197igj75aami1c13vhi9rf1n9v3_container"
                                             class="moxie-shim moxie-shim-html5"
                                             style="position: absolute; top: 0px; left: 0px; width: 167px; height: 45px; overflow: hidden; z-index: 0;">
                                            <input id="html5_197igj75aami1c13vhi9rf1n9v3" type="file"
                                                   style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
                                                   multiple="" accept="">
                                        </div>
                                    </div>
                                </div>
    
                                <div style="display:none" id="success" class="col-md-12">
                                    <div class="alert-success">
                                        队列全部文件处理完毕
                                    </div>
                                </div>
                                <div class="col-md-12 ">
                                    <table class="table table-striped table-hover text-left"
                                           style="margin-top:40px;display:none">
                                        <thead>
                                        <tr>
                                            <th class="col-md-4">文件名</th>
                                            <th class="col-md-2">大小</th>
                                            <th class="col-md-6">详情</th>
                                        </tr>
                                        </thead>
                                        <tbody id="fsUploadProgress">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
    <span style="white-space:pre">		</span><%--end--%>

4 修改页面代码的两个value值，第一个是新建空间的域名，第二个就是刚刚新建的controller，用于获取uptoken，这里主要是赋值给main.js中的  
domain:$("\#domain").val();

uptoken$("\#uptoken").val();

5 其他文件可以不做修改。

6 实现效果

![Center 2][]

7总结  
** 可以上传100M以内的文件，文件上限是自己设定的，分块大小也是自己设定的。支持断点续传等，图片文件支持缩略图，支持上传完成添加水印，改变角度等。本文主要是为了记录，可能很多不对或者不科学的说法，请大婶们见谅！**

[Center]: /images/20220810/4d122b053fe545fca8c7070de292682f.png
[Center 1]: /images/20220810/1939f334134043569d19f15705db4eb1.png
[Center 2]: /images/20220810/ce54682a0ffe4421930c911d7967d27d.png