关闭

七牛上传文件(JS实现)

标签: 七牛javascript云存储plupload
898人阅读 评论(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
 print?
  1. <!--qiniu begin-->  
  2. <dependency>  
  3.     <groupId>com.qiniu</groupId>  
  4.     <artifactId>sdk</artifactId>  
  5.     <version>6.1.7</version>  
  6. </dependency>  
  7. <!--qiniu end-->  

2 初始化

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

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


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


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

[java] view plain copy
 print?
  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
     print?
    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
 print?
  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
 print?
  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
 print?
  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
 print?
  1. <input type="hidden" id="domain" value="http://niu8.qiniudn.com/">  
  2. <input type="hidden" id="uptoken_url" value="${ctx}/container/uptoken">  

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

6 实现效果


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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:331573次
    • 积分:4357
    • 等级:
    • 排名:第6911名
    • 原创:4篇
    • 转载:663篇
    • 译文:0篇
    • 评论:10条
    最新评论