文档章节

文件上传(七牛)

 小阳007
发布于 2016/12/10 17:01
字数 521
阅读 28
收藏 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
677
0
微信小程序 - 前台接入七牛云上传图片和视频

相信小程序开发者在开发过程中都会遇到上传代码包遇到大小限制这个问题,因为微信现在规定代码不能超过 2 MB 大小,但我们实际开发过程中难免会有业务需求要使用一些图片和视频等媒体文件,这...

几个栗子
10/14
0
0
七牛云模块化文档

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

Joryun刘家源
01/02
0
0
mikey.zhaopeng/ndpediter

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

mikey.zhaopeng
2015/11/26
0
0
企业数据云备份——七牛云(linux、windows)

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

技术小疯子
07/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

No transaction aspect-managed TransactionStatus in scope

No transaction aspect-managed TransactionStatus in scope 如果当前事务操作的实现所在方法没有开启事务,就会报出这样的异常。 例如你在A方法调用B方法,B方法开启了事务,A方法没有开启事...

嘴角轻扬30
13分钟前
1
0
SpringBoot整合Redis Lettuce

最近在准备集成的基础框架使用Spring Boot2搭建,其中Redis的支持不仅仅是丰富了它的API,更是替换掉底层Jedis的依赖,取而代之换成了Lettuce(生菜) jedis跟lettuce的区别 Lettuce 和 Jedis ...

lemonLove
20分钟前
1
0
mysqldumpslow 慢查询日志分析工具

首先得配置my.cnf: #====================================================================================================================##=====================================......

吴伟祥
20分钟前
2
0
如何基于阿里云搭建适合初创企业的轻量级架构?

----基于阿里云搭建的适合初创企业的轻量级架构 前言 在项目的初期往往存在很多变数,业务逻辑时刻在变,而且还要保证快速及时,所以,一个灵活多变、快速部署、持续集成并可以适应多种情况的...

阿里云云栖社区
21分钟前
1
0
SpringBoot基础教程4-1-1 使用JdbcTemplate操作数据库及事务管理

1 概述 SpringBoot封装的JdbcTemplate,使用模板模式,去除JDBC繁琐的重复代码,并提供了基于注解的事务管理;下面详细介绍如何使用JdbcTemplate操作数据和事务管理。 2 添加依赖 <dependenc...

Mkeeper
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部