图片上传到七牛云存储空间

html页面如下

<label for="author">图片</label>
<div id="uparea"><input type="file"   id="pickfiles"  ><textarea class="form-control textarea" rows="4" name="img_url" id="img_url" placeholder="img_url"></textarea>
</div>

必要的js文件

 <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script><script type="text/javascript" src="js/qiniu.js"></script>

其中qiniu.js在下面贴出

(function(w, d, u) {var uploader;function uploaderReady(token) {// 引入Plupload 、qiniu.js后uploader = Qiniu.uploader({runtimes : 'html5,flash,html4', // 上传模式,依次退化browse_button : 'pickfiles', // 上传选择的点选按钮，**必需**uptoken : token,  // 这里的token是AJAX得到的// uptoken_url: '/token', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）// uptoken: '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成save_key: false,  // save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理domain : 'http://XXXX.com', // bucket 域名，下载资源时用到，这个可以到自己的七牛空间里找到具体url，**必需**get_new_uptoken : false, // 设置上传文件的时候是否每次都重新获取新的tokencontainer : 'uparea', // 上传区域DOM ID，默认是browser_button的父元素，max_file_size : '4mb', // 最大文件体积限制flash_swf_url : 'Moxie.swf', // 引入flash,相对路径max_retries : 3, // 上传失败最大重试次数dragdrop : true, // 开启可拖曳上传drop_element : 'uparea', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传chunk_size : '4mb', // 分块上传时，每片的体积auto_start : true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传unique_names:false, // unique_names: true, filters: {  //对上传文件类型进行限制mime_types : [{ title : "Image files", extensions : "jpg,gif,png"}],max_file_size: "4mb",prevent_duplicates: true},init : {'FilesAdded' : function(up, files) {plupload.each(files, function(file) {// 文件添加进队列后,处理相关的事情
//                        console.log(file.name);});},'BeforeUpload' : function(up, file) {// 每个文件上传前,处理相关的事情},'UploadProgress' : function(up, file) {// 每个文件上传时,处理相关的事情},'FileUploaded' : function(up, file, info) {// 每个文件上传成功后,处理相关的事情// 其中 info 是文件上传成功后，服务端返回的json，形式如// {// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",// "key": "gogopher.jpg"// }// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.htmlvar domain = up.getOption('domain');var res =  JSON.parse(info);//                   console.log(res);var sourceLink = domain +'/'+ res.key; // 获取上传成功后的文件的Urldocument.getElementById("img_url").value +=sourceLink+"\n";// 将url展示到标签中},'Error' : function(up, err, errTip) {// 上传出错时,处理相关的事情},'UploadComplete' : function() {// 队列文件处理完毕后,处理相关的事情},'Key' : function(up, file) {// 若想在前端对每个文件的key进行个性化处理，可以配置该函数// 该配置必须要在 unique_names: false , save_key: false 时才生效//key就是上传的文件路径  var key = "";  //获取年月日时分秒  var date = new Date();  var year = date.getFullYear();  var month = date.getMonth()+1;  var day = date.getDate();  var hour = date.getHours();  var minute = date.getMinutes();  var second = date.getSeconds();  key += 'blog/' + year+'_'+month+'_'+day+'_'+hour+minute+second;
//                      console.log("文件路径："+file.name);  key += file.name;return key}}});}// domain 为七牛空间（bucket)对应的域名，选择某个空间后可以看到// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs$(d).ready(function() {var upToken;$.ajax({cache : false,async : false,type : "POST",dataType : "json",url : "/XXX/XXXXX",  // java 后台，获取upTokensuccess : function(data) {console.log(data.data.upToken);upToken = data.data.upToken;uploaderReady(upToken);},error : function(XMLHttpRequest, textStatus, errorThrown) {
//                    alert("textStatus="+textStatus+"   errorThrown="+errorThrown);
//                    alert("获取token失败");}});});//    document.getElementById('pickfiles').onclick = function() { //可通过按钮触发
//        uploader.start();
//    };
})(window, document);

完成上述配置后,需写一个简单的后台类从七牛获取许可token
准备: 七牛jar包

         <!-- 七牛云SDK --><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.11</version></dependency>

然后根据qiniu.js中的请求写后台类
需要ACCESS_KEY和SECRET_KEY 都可从七牛获取
代码如下

package com.zzipsun.controller;import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.qiniu.util.Auth;
import com.zzipsun.util.JsonResult;
/*** @author zs**/
@Controller
@RequestMapping("/XXXX")
public class QiNiuController extends BaseController {/** 基本配置-从七牛管理后台拿到，这两个后台获取* 设置好账号的ACCESS_KEY和SECRET_KEY*/
public String ACCESS_KEY = "GnYUvzG5I8D9LJ8K-eXXXXXXXXXXXXXXXXX";public String SECRET_KEY = "CJJqFk-5AeJO1IVQEXXXXXXXXXXXXXXXXXX";// 要上传的空间名--bucketname 也叫存储空间名，在七年里自己设置的
//对应要上传到七牛上 你的那个路径（自己建文件夹 注意设置公开）
public String bucketname = "XXXXXXX";public String getUpToken() {// 密钥配置System.out.println("初始化上传变量");Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);return auth.uploadToken(bucketname);
}//获取qiniu token
@ResponseBody
@RequestMapping(value="getToken")
public JsonResult  getToken() {//   System.out.println("uptoken方法:"+name);// 获取七牛的uptokenString upToken=getUpToken();Map<String, String> map = new HashMap<String, String>();map.put("upToken", upToken);System.out.println("token======================"+upToken);return new JsonResult(map);}}

再次打开对应页面
即可获得许可

选择图片后即可上传到七牛,也可以按钮触发
效果如下,文本框会出现外链地址

图片上传到七牛云存储空间相关推荐

【Go实战 | 电商平台】(7) 图片上传到七牛云
文章目录 1. 获取配置信息 2. config 3. upload 完整代码这一章节中我们介绍如何把图片上传到七牛云,并且返回对应图片的 url .因为后续我们的创建的商品,更换头像等等都是把我们 ...
将base64编码图片上传到七牛云
将base64编码图片上传到七牛云接口说明 FAQ >对象存储 >上传下载> 如何上传base64编码图片到七牛云在七牛云FAQ上有一篇文章,讲解的接口的使用 https://d ...
Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
php七牛云批量上传,七牛云——批量将本地图片上传到七牛云
前言在本地大概有10w左右的头像图片,打算批量上传到七牛云,寻找后发现了一个神奇的官方工具,十分的好用工具资源批量上传和多文件上传我这里上传本地用的是QsunSync QsunSync Git ...
PHP图片加水印，然后将加水印的图片上传到七牛云
今天项目有这么一个需求,简单实现了一下,当然用起来是没有任何问题的,现在把实现代码分享给小伙伴们 public function uploadImgToQiniu($picture_id){$wate ...
将本地图片上传至七牛云
准备工作一个域名(用来融合CDN加速) 七牛云创建一个存储空间七牛云绑定域名在注册完七牛云并创建了一个存储空间后,七牛云会给你自动分配一个融合 CDN 测试域名,但是只有30天的有效期.所以要在 ...
Java实现将文件(图片)上传到七牛云对象存储，并实现下载和删除功能
引言:在搭建项目时如果把上传的文件存储在该项目运行的主机上,会导致访问该项目时加载非常缓慢,因此需要对象存储.并且对象存储具有网站数据动静分离,大幅提升网页性能,储存节点多,支持跨地域实时同步,成本低 ...
前端怎样使用base64图片上传到七牛云
先通过后端拿到 domain 和 token 值其实就是后端通过七牛仓库的一些配置返为 domain 和 token let url = globalAjaxUrl + '/admin/bann ...
图片上传到七牛云/阿里云的OSS
1.准备七牛云/阿里云OSS https://github.com/pfinal/storage 2.composer安装包安装composer require pfinal/storage 本地 ...

图片上传到七牛云存储空间

图片上传到七牛云存储空间相关推荐

最新文章

热门文章