七牛上传文件（JS实现）

深碍√TFBOYSˉ_ 2022-08-23 00:30 772阅读 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依赖

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.    
2.  **<****dependency****>**  
3.      **<****groupId****>**com.qiniu**</****groupId****>**  
4.      **<****artifactId****>**sdk**</****artifactId****>**  
5.      **<****version****>**6.1.7**</****version****>**  
6.  **</****dependency****>**  
7.

2 初始化

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

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

![Center][]

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

![Center 1][]

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

**\[java\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  @RequestMapping(value = "uptoken", method = RequestMethod.GET)  
2.  @ResponseBody  
3.  **public** ResponseEntity<Object> makeToken() \{  
4.      //todo  
5.      // 需要修改AK、SK、bucketName  
6.      Config.ACCESS\_KEY = "FhR6piyeRd07vhonfdIePWPgeIrTXmOXyeZx8gKm";  
7.      Config.SECRET\_KEY = "goerw3ZniGNmrpVbUuyhI\_-u2VFEzUKYY6OZ5lRj";  
8.      Mac mac = **new** Mac(Config.ACCESS\_KEY, Config.SECRET\_KEY);  
9.      String bucketName = "niu8";  
10.     PutPolicy putPolicy = **new** PutPolicy(bucketName);  
11.     **try** \{  
12.         String uptoken = putPolicy.token(mac);  
13.         JSONObject jsonObject=**new** JSONObject();  
14.         jsonObject.put("uptoken",uptoken);  
15.         **return** **new** ResponseEntity(jsonObject, HttpStatus.OK);  
16.     \} **catch** (AuthException e) \{  
17.         e.printStackTrace();  
18.         **return** **new** ResponseEntity(**null**, HttpStatus.BAD\_REQUEST);  
19.     \} **catch** (JSONException e) \{  
20.         e.printStackTrace();  
21.         **return** **new** ResponseEntity(**null**, HttpStatus.BAD\_REQUEST);  
22.     \}  
23. \}

说明：

1.  这里的controller的请求映射为/container,请求的方法的映射为uptoken，因此页面请求的路径为$(ctx)/container/uptoken
    
    **\[java\]**  [view plain][]   [copy][view plain]
    
      [print][view plain] [?][view plain]
    
    1.  <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

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****link** rel="stylesheet" href="$\{ctx\}/static/qiniu/css/main.css"**/>**  
2.  **<****link** rel="stylesheet" href="$\{ctx\}/static/qiniu/css/highlight.css"**/>**

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/plupload.full.min.js"**>****</****script****>**  
2.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/zh\_CN.js"**>****</****script****>**  
3.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/ui.js"**>****</****script****>**  
4.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/qiniu.js"**>****</****script****>**  
5.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/main.js"**>****</****script****>**  
6.  **<****script** type="text/javascript" src="$\{ctx\}/static/qiniu/js/jquery.min.js"**>****</****script****>**

4 页面主要代码

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****span** style="white-space:pre"**>**        **</****span****>****<**%--start新增七牛上传--%**>**  
2.                      **<****div** class=""**>**  
3.                          **<****div** class="text-left col-md-12 wrapper"**>**  
4.                              **<****input** type="hidden" id="domain" value="http://niu8.qiniudn.com/"**>**  
5.                              **<****input** type="hidden" id="uptoken\_url" value="$\{ctx\}/container/uptoken"**>**  
6.                          **</****div****>**  
7.                          **<****div** class="body"**>**  
8.                              **<****div****>**  
9.                                  **<****div** id="container"**>**  
10.                                     **<****a** class="btn btn-default btn-md " id="pickfiles"**>**  
11.                                         **<****i** class="glyphicon glyphicon-plus"**>****</****i****>**  
12.                                         **<****sapn****>**上传版本文件**</****sapn****>**  
13.                                     **</****a****>**  
14.   
15.                                     **<****div** id="html5\_197igj75aami1c13vhi9rf1n9v3\_container"  
16.                                          class="moxie-shim moxie-shim-html5"  
17.                                          style="position: absolute; top: 0px; left: 0px; width: 167px; height: 45px; overflow: hidden; z-index: 0;"**>**  
18.                                         **<****input** id="html5\_197igj75aami1c13vhi9rf1n9v3" type="file"  
19.                                                style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"  
20.                                                multiple="" accept=""**>**  
21.                                     **</****div****>**  
22.                                 **</****div****>**  
23.                             **</****div****>**  
24.   
25.                             **<****div** style="display:none" id="success" class="col-md-12"**>**  
26.                                 **<****div** class="alert-success"**>**  
27.                                     队列全部文件处理完毕  
28.                                 **</****div****>**  
29.                             **</****div****>**  
30.                             **<****div** class="col-md-12 "**>**  
31.                                 **<****table** class="table table-striped table-hover text-left"  
32.                                        style="margin-top:40px;display:none"**>**  
33.                                     **<****thead****>**  
34.                                     **<****tr****>**  
35.                                         **<****th** class="col-md-4"**>**文件名**</****th****>**  
36.                                         **<****th** class="col-md-2"**>**大小**</****th****>**  
37.                                         **<****th** class="col-md-6"**>**详情**</****th****>**  
38.                                     **</****tr****>**  
39.                                     **</****thead****>**  
40.                                     **<****tbody** id="fsUploadProgress"**>**  
41.                                     **</****tbody****>**  
42.                                 **</****table****>**  
43.                             **</****div****>**  
44.                         **</****div****>**  
45.                     **</****div****>**  
46. **<****span** style="white-space:pre"**>**        **</****span****>****<**%--end--%**>**

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

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

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****input** type="hidden" id="domain" value="http://niu8.qiniudn.com/"**>**  
2.  **<****input** type="hidden" id="uptoken\_url" value="$\{ctx\}/container/uptoken"**>**

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

6 实现效果

![Center 2][]

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

[JavaScript]: http://lib.csdn.net/base/18
[view plain]: http://blog.csdn.net/musuny/article/details/41650629#
[Center]: /images/20220722/1a64f57e9d3f4d2f922fc0403b2fcf26.png
[Center 1]: /images/20220722/cb239fbb5a9644c6aebe6d6266eab3ee.png
[Center 2]: /images/20220722/45e24c79194e47c990ba8f4f3b411163.png