文档章节

文件上传(七牛)

 小阳007
发布于 2016/12/10 17:01
字数 521
阅读 24
收藏 0

最近在做七牛云存储 ,网上找了一些资料参考了一下,写了这一篇文章(当然了,代码大部分是copy的)

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

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

业务流程: 终端用户 => 业务服务器 => 云存储服务

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

第二步:

 @RequestMapping(value = "uptoken", method = RequestMethod.GET)    //限制get请求 获取uptoken
@ResponseBody  
public ResponseEntity<Object> makeToken() {  

    Config.ACCESS_KEY = "获取的key";  
    Config.SECRET_KEY = "获取的key";  
    Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);    //把一对key传入到mac中
    String bucketName = "niu8";  
    PutPolicy putPolicy = new PutPolicy(bucketName);  
    try {  
        String uptoken = putPolicy.token(mac);                 //七牛SDK API构造一个uptoken
        JSONObject jsonObject=new JSONObject();  
        jsonObject.put("uptoken",uptoken);                        //封装为JSON格式
        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);  
    }  
}  

第三步: 导入js所需要的 css 和js


<span style="white-space:pre">  </span>
                    <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>

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 521
作品 0
衡阳
如何使用七牛给自己的网站加速?

如何使用七牛给自己的网站加速?或者说,如何使用七牛云存储的 CDN? 如果你恰巧问这样的问题,可能是因为你对七牛云存储所能提供的服务不太了解。七牛云存储提供三大服务:云存储、上传/下载...

modernizr
2014/11/14
426
0
七牛云模块化文档

前言 闲来无事,搭建了个人私仓来放模块化项目,以便项目引入直接使用。关键是,模块化可以根据项目所需进行版本迭代,每一次的使用都是完善的根基,效果贼棒。 介绍 七牛云是国内领先的企业...

Joryun刘家源
01/02
0
0
javaweb七牛云切片视频+播放

使用七牛云存储视频切片并播放 一共包括了以下这些点: web视频播放器 七牛云上传视频 七牛云视频切片 播放m3u8格式视频 这里提供了所有需要的jar和视频插件 http://download.csdn.net/detai...

u012206458
2017/05/11
0
0
企业数据云备份——七牛云(linux、windows)

企业数据云备份——七牛云(linux、windows) 一、七牛云介绍 七牛云,在国内是一个比较出名云平台,很多人、公司,或多或少也使用过七牛云来备份文件。对七牛云来说,它主要给用户提供了无限...

技术小疯子
07/26
0
0
mikey.zhaopeng/ndpediter

ndpediter 原因 现在使用 markdown 编辑器,但是图片存储是个问题,是放在本地还是上传到哪里,目前已有的编辑器中,没有能满足我自己使用的,由于当下就造了一个轮子出来. 特性 支持 markdown, ...

mikey.zhaopeng
2015/11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway真的有那么差吗?

前言 Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版的Zuul 2在经过了多次跳票之后,对于Spring这样的整...

Java小铺
45分钟前
1
0
SpringBoot远程调试,远程debug你的线上项目

开发环境中代码出错了,可以利用IDE的debug功能来进行调试。那线上环境出错呢? 一、假设我们的项目是部署在tomcat中,那我们就需要对tomcat进行一定对配置,配置如下。 1. windows系统中,找...

nonnetta
50分钟前
0
0
JAVA秒杀优化方向

秒杀优化方向 将请求尽量拦截在系统上游:传统秒杀系统之所以挂,请求都压倒了后端数据层,数据读写锁冲突严重,几乎所有请求都超时,流量虽大,下单成功的有效流量甚小,我们可以通过限流、...

小贱是个程序员
58分钟前
0
0
C# 统计字符串中大写字母和小写字母的个数

static void Main() { int count1 = 0; int count2 = 0; Console.WriteLine("请输入字符串"); string str = Convert.ToString(Consol......

熊二的爸爸是谁
今天
0
0
分布式服务框架之远程通讯技术及原理分析

在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是...

老道士
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部