文档章节

文件上传(七牛)

 小阳007
发布于 2016/12/10 17:01
字数 521
阅读 24
收藏 0
点赞 0
评论 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 ⋅ 0

七牛云模块化文档

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

Joryun刘家源 ⋅ 01/02 ⋅ 0

mikey.zhaopeng/ndpediter

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

mikey.zhaopeng ⋅ 2015/11/26 ⋅ 0

javaweb七牛云切片视频+播放

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

u012206458 ⋅ 2017/05/11 ⋅ 0

七牛云储存:最好的 WordPress 静态文件CDN加速方案

七牛云存储是由七牛提供的在线存储服务,通过云端接口向企业客户提供网上无限存储空间,和传统的云存储服务(如 Amazon S3、又拍云存储)不同,七牛云存储还增加了上传下载传输加速以及富媒体...

modernizr ⋅ 2014/12/17 ⋅ 0

ueditor上传图片到七牛云存储(form api,java)

ueditor上传图片到七牛云存储 重要说明,本人已不做java多年,请不要加qq再问我java的东东,欢迎提问python。 ueditor结合七牛传图片 传统上,图片是存在自己的服务器上(图片->自己服务器),...

duoduo3_69 ⋅ 2013/11/06 ⋅ 16

七牛镜像存储 WordPress 插件:一键实现 WordPress 博客静态文件 CDN 加速

七牛云存储是由七牛提供的在线存储服务,通过云端接口向企业客户提供网上无限存储空间,和传统的云存储服务(如 Amazon S3)不同,七牛云存储还增加了上传下载传输加速以及富媒体云端处理特性...

Amamatthew ⋅ 2014/08/19 ⋅ 0

七牛上传文件小工具v0.1

非常喜欢 七牛的存储,但是七牛也没有论坛,想找个小工具都很难。而官方的windows下的上传工具 qrsync虽然很强大,但是对于经常上传单个文件来说有点过于复杂了。我只不过想上传然后得到地址...

itfanr ⋅ 2014/12/20 ⋅ 0

《介绍一款开源的类Excel电子表格软件》续:七牛云存储实战(C#)

两个月前的发布的博客《介绍一款开源的类Excel电子表格软件》引起了热议:在博客园有近2000个View、超过20个评论。 同时有热心读者电话咨询如何能够在SpreadDesing中实现存储Excel云文件,既...

葡萄城控件技术团队 ⋅ 2014/12/11 ⋅ 0

PHPcms使用七牛存储图片文件

不知道现在有多少人使用第三方云存储,我反正是在云存储一出来就开始快速使用了。因为第三方云存储的优势太大了。无论是自己开发,还是使用现成的cms,通过第三方云存储都可以达到减轻服务器...

617524695 ⋅ 2015/08/11 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 14分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 26分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 今天 ⋅ 9

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 今天 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部