文件上传(七牛)
文件上传(七牛)
小阳007 发表于10个月前
文件上传(七牛)
  • 发表于 10个月前
  • 阅读 13
  • 收藏 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
×
小阳007
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: