文档章节

文件上传(七牛)

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

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

几个栗子
10/14
0
0
如何使用七牛给自己的网站加速?

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

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

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

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

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

mikey.zhaopeng
2015/11/26
0
0
javaweb七牛云切片视频+播放

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

u012206458
2017/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux命令备忘录: jobs 显示Linux中的任务列表及任务状态命令

jobs命令用于显示Linux中的任务列表及任务状态,包括后台运行的任务。该命令可以显示任务号及其对应的进程号。其中,任务号是以普通用户的角度进行的,而进程号则是从系统管理员的角度来看的...

开元中国2015
43分钟前
1
0
springboot Whitelabel Error Page(Not Found)解决方案

当出现上图图的错误时注意 报错信息 There was an unexpected error (type=Not Found, status=404). Not Found代表未访问到资源 解决方案:比较访问路径和代码的路径有没有写错 正确的访问路...

斩神魂
44分钟前
1
0
记一次hbase master停止服务的原因以及恢复

在Hdfs空间不足的情况下,拒绝写入,hbase会down掉。如果hdfs空间没有清理的情况下,重新启动hbase,会报splitlog失败,原因是wal日志重写过程中会写hdfs,写不进去导致的。重启不成功。 解决...

PageYi
47分钟前
1
0
如何从平面设计转行到UI设计?

时代的变迁,科技的进步,工具的发展,薪资的差距,促使许多人转行的原因,但平面与界面两者之间有着哪些的差异呢?如果,想要转行又该具备哪些条件呢? 平面、界面设计之间的差异性 平面设计...

mo311
50分钟前
4
0
线程池整理

一般在生产环境中,我们都不会直接new一个Thread,然后再去start(),因为这么做会不断频繁的创建线程,销毁线程,过大的线程会耗尽CPU和内存资源,大量的垃圾回收,也会给GC带来压力,延长GC停顿时间...

算法之名
52分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部