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

最新推荐文章于 2024-08-27 16:58:03 发布

weixin_33928467

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量408

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/danjuan/blog/834518

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

jsp页面部分：

1.引入js文件

        <!--七牛必要组件start-->
		<script type="text/javascript" src="./qianniuJs/js/moxie.js"></script>
		<script type="text/javascript" src="./qianniuJs/js/plupload.dev.js"></script>
		<script type="text/javascript" src="./qianniuJs/js/qiniu.js"></script>
		<script type="text/javascript" src="./qianniuJs/qiniuImg.js"></script>
		<!--七牛必要组件end-->

2.初始化组件

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

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

       <!--七牛上传组件start-->
			<button type="button" id="qiniupercent" style="width: 1%"></button>
			<div id="btn-uploader">
				<a id="pickfiles" href="javascript:void 0;">Upload File</a>
			</div>
		<!--七牛上传组件end-->

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<String,Object> uptocken(HttpServletRequest request){
        Map<String,Object> 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
                }
            }
        }
}

转载于:https://my.oschina.net/danjuan/blog/834518