使用前端云上传图片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                }            }        }}