七牛上传图片html,前端JavaScript——七牛云上传图片配置

使用前端云上传图片API 七牛云的相关配置：

jsp页面部分：

1.引入js文件

2.初始化组件

id="qiniupercent"的button按钮，为进度条显示

id="btn-uploader"的div 和 id="picfiles" 的a标签 为主要初始化上传控件。

Upload File

3.主要初始化js

/*

页面加载完毕 发起请求获取七牛token

* 之后调用上传组件构造方法[qiniuImg.js]

*/

function getTokenMessage() {

$.ajax({

url: '/main/upToken',

type: 'POST',

data: {},

cache: false,

contentType: false, //不可缺

processData: false, //不可缺

dataType : 'json',

success: function (data) {

var obj = data;

uploaderReady(obj.uptoken);

}

});

}

$(document).ready(function(){

getTokenMessage();

});

4.qiniuImg.js 代码

/**

* Created by pan on 17/1/12 0012.

* 七牛上传图片JS

* 传入token后执行方法

*/

function uploaderReady(token){

var uploader = Qiniu.uploader({

runtimes: 'html5,flash,html4',

browse_button: 'pickfiles', //上传按钮的ID

container: 'btn-uploader', //上传按钮的上级元素ID

drop_element: 'btn-uploader',

max_file_size: '100mb', //最大文件限制

flash_swf_url: '/static/js/plupload/Moxie.swf',

dragdrop: false,

chunk_size: '4mb', //分块大小

//uptoken_url: '', //Ajax请求upToken的Url，**强烈建议设置**(服务端提供)

uptoken: token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成

// save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理

domain: 'http://ojantumyo.bkt.clouddn.com/', //自己的七牛云存储空间域名

multi_selection: false, //是否允许同时选择多文件

filters: {

mime_types: [ //文件类型过滤，这里限制为图片类型

{title: "Image files", extensions: "jpg,jpeg,gif,png"}

]

},

auto_start: true,

unique_names :true, //自动生成文件名,如果值为false则保留原文件名上传

init: {

'FilesAdded': function (up, files) {

plupload.each(files, function(file) {

// 文件添加进队列后，处理相关的事情

});

},

'BeforeUpload': function (up, file) {

// 每个文件上传前，处理相关的事情

},

'UploadProgress': function (up, file) {

//文件上传时，处理相关的事情

/*可能是文件大小

var chunk_size = plupload.parseSize(this.getOption('chunk_size'));

*/

//上传进度 class="layui-btn" type="button"

$('#qiniupercent').attr('style','width:'+file.percent+'%');

//console.log(file.percent + "%");

},

'UploadComplete': function () {

//do something

},

'FileUploaded': function (up, file, info) {

//每个文件上传成功后,处理相关的事情

//其中 info 是文件上传成功后，服务端返回的json，形式如

//{

// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",

// "key": "gogopher.jpg"

//}

var domain = up.getOption('domain');

var res = eval('(' + info + ')');

var sourceLink = domain + res.key;//获取上传文件的链接地址

console.log(sourceLink);

//do something

},

'Error': function (up, err, errTip) {

alert(errTip);

},

'Key': function (up, file) {

//当save_key和unique_names设为false时，该方法将被调用

var key = "";

$.ajax({

url: '/qiniu-token/get-key/',

type: 'GET',

async: false,//这里应设置为同步的方式

success: function (data) {

var ext = Qiniu.getFileExtension(file.name);

key = data + '.' + ext;

},

cache: false

});

return key;

}

}

});

uploader.start();

}

后台接口部分

1.controller方法

@RestController

@RequestMapping("/main")

public class MainController(){

//七牛Token

@RequestMapping("/upToken")

public Map uptocken(HttpServletRequest request){

Map resultMap = Maps.newHashMap();

String token = QianNiuUpload.getUpToken();

resultMap.put("uptoken",token);

return resultMap;

}

}

2.七牛工具类

/**

* Created by pan on 17/1/5 0005.

* 七牛接口上传工具类，直接通过地址读取本地文件

* -这种方式由于会涉及到浏览器保护

*/

public class QianNiuUpload {

//设置好账号的ACCESS_KEY和SECRET_KEY

public static String ACCESS_KEY = "官网注册后获取到的ak";

public static String SECRET_KEY = "注册后获取到的sk";

//要上传的空间

public static String bucketname = "个人在官网开通的空间名";

//上传到七牛后保存的文件名

public static String key = "my-java.png";

//上传文件的路径

public static String FilePath = "D:\\JAVA\\idea\\uu\\src\\main\\img\\user_head_img\\1483600033410.jpeg";

//密钥配置

public static Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

///指定上传的Zone的信息//

//第一种方式: 指定具体的要上传的zone

//注：该具体指定的方式和以下自动识别的方式选择其一即可

//要上传的空间(bucket)的存储区域为华东时

// Zone z = Zone.zone0();

//要上传的空间(bucket)的存储区域为华北时

// Zone z = Zone.zone1();

//要上传的空间(bucket)的存储区域为华南时

// Zone z = Zone.zone2();

//第二种方式: 自动识别要上传的空间(bucket)的存储区域是华东、华北、华南。

public static Zone z = Zone.autoZone();

public static Configuration c = new Configuration(z);

//创建上传对象

private static UploadManager uploadManager = new UploadManager(c);

//简单上传，使用默认策略，只需要设置上传的空间名就可以了

public static String getUpToken() {

return auth.uploadToken(bucketname);

}

public static void upload() throws IOException {

try {

//调用put方法上传

Response res = uploadManager.put(FilePath, key, getUpToken());

//打印返回的信息

System.out.println(res.bodyString());

} catch (QiniuException e) {

Response r = e.response;

// 请求失败时打印的异常的信息

System.out.println(r.toString());

try {

//响应的文本信息

System.out.println(r.bodyString());

} catch (QiniuException e1) {

//ignore

}

}

}

}