上传base64编码图片到七牛云

1.上传base64编码图片到七牛云

	参考官方提供的接口文档：
		https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code


	POST的URL地址格式：
		http://域名/putb64/文件大小/key/"安全的" base64编码后的文件名/mimeType/MIME类型/crc32/crc32校验值/x:user-var/用户自定义的变量

		解释下需要的参数：
			1>首先是域名，下面是js代码
		        var domains = [
		                'upload.qiniu.com',         // 华东
		                'upload-z1.qiniu.com',      // 华北
		                'upload-z2.qiniu.com',      // 华南
		                'upload-na0.qiniu.com',     // 北美
		            ];

	        2>文件大小
	        	必填
	        	1)可以传入 -1 - 表示文件大小以 'http request body' 为准
	        	2)传入图片未经过base64处理的原图字节大小
	        		注意：
		        		获取文件大小的时候，切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。

	        3>指定的文件名key
	        	非必填
	        	未指定，按下列情况处理：
	        		1)uptoken.SaveKey存在，则基于 SaveKey 生成key
	        		2)uptoken.SaveKey不存在，则用 hash 生成key
	        	指定的话，需要经过 '安全的' base64编码
	        		该编码方式的基本过程是先将内容以Base64格式编码为字符串，然后检查该结果字符串，将字符串中的加号+换成中划线-，并且将斜杠/换成下划线_。

	        		详细编码规范参照 "RFC4648":
	        			https://tools.ietf.org/html/rfc4648

	        4>MIME类型
	        	非必填，貌似必须使用 '安全的' base64编码，我们也可不填入，添加到 'Content-Type' 请求头
	        	默认使用：application/octet-stream

	        5>crc32校验值
	        	非必填
	        	文件内容的 crc32 校验值，不指定则不进行校验

	POST请求，需要添加的额外头部：
		1.Content-Type 		// 默认可填入 'application/octet-stream'
		2.Authrization - 上传凭证
			注意：
				'UpToken ' + 从服务器获取到的上传token		// UpToken后必须有个 ' '(空格)

			参考官网文档:
				https://developer.qiniu.com/kodo/manual/1208/upload-token	

			建议，每次通过ajax从后台服务器获取(不要从后端分配一个，因为考虑页面，可能会上传多次图片，一个uptoken是不是不足？？没测试过！)

	注意点：
		1.可能很多canvas得到的base64图片，都会有前缀 "data:image/png;base64,"，先去除。不去除，会报错：
			{error: "illegal base64 data at input byte 4"}

		2.计算文件大小(参照网上的文章)

			// 通过base64编码字符流计算文件流大小函数
			function fileSize(str) {
			    var fileSize;

			    // 找到等号，把等号也去掉
			    if (str.indexOf('=') > 0) {
			       	var indexOf = str.indexOf('=');
			       	str = str.substring(0, indexOf);	// 把末尾的’=‘号去掉
			    }
			    fileSize = parseInt(str.length - (str.length / 8) * 2);
			    return fileSize;
			}

		3.javascript没有内置的base64函数，在网上找了个：
            https://github.com/dankogai/js-base64

        4.对于时间格式，不想使用原生javascript的，可以搜索 'moment.js'(3万+)，github地址：
        	https://github.com/moment/moment	

2.给个示例：
		/*
			项目中各种代码想结合，不好拆分，大家大概明白是什么意思就行了
		 */

        // 上传头像到七牛云
        function qiniu_upload(event, opts){
            var token, image_ext, destination_file_name, upload_success = false;
            // 获取图片后缀名
            image_ext = image_type.toLowerCase().replace(/image\//, '');
            destination_file_name = 'uploads/' + moment().format('Y-M') + '/' + moment().format('YMDhms') + Math.ceil(Math.random() * 1000) + '.' + image_ext;
            // 安全的 base64编码
            destination_file_name = Base64.encode(destination_file_name).replace('+', '-').replace('/', '_');

            // 先去除 base64_upload_data "data:image/png;base64," 前缀(.*? - 非贪婪模式)
            base64_upload_data = base64_upload_data.replace(/^.*?base64,/, '');
            
            // 1.获取upload_token
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                async: false,
                type: 'POST',
                url: '/qiniu/upload-token',
                dataType: 'json',
                success: function(data){
                    if(data.errno == 0){
                        token = data.upload_token;
                    }else{
                        layer.closeAll();   // 关闭加载层
                        layer.msg('获取token失败！', { maxWidth: 260,});
                        event.preventDefault();     // 传递的回调的 '表单submit事件'，阻止表单提交
                    }
                },

                /*
                    注意：
                        之前的ajax都未写过'error处理'，可能服务器直接500错误，而js直接报错！\
                        导致程序可能执行异常！而没有提示！\
                        以后，js端也需要进行异常处理！
                 */
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    layer.closeAll();   // 关闭加载层
                    layer.msg('服务器获取上传token异常！请及时联系技术人员！修复异常！', {time: 5000, maxWidth: 260});
                    event.preventDefault();     // 传递的回调的 '表单submit事件'，阻止表单提交
                }
            });
            if(typeof token == 'undefined'){
                return false;
            }

            // 2.上传七牛云
            var domains = [
                    'upload.qiniu.com',         // 华东
                    'upload-z1.qiniu.com',      // 华北
                    'upload-z2.qiniu.com',      // 华南
                    'upload-na0.qiniu.com',     // 北美
                ];
            var url = 'http://' + domains[0] + '/putb64/-1/key/' + destination_file_name;
            $.ajax({
                headers: {
                    'Content-Type': 'application/octet-stream',
                    'Authorization': 'UpToken ' + token,    // UpToken后必须有一个 ' '(空格)
                },
                async: false,
                type: 'POST',
                url: url,
                dataType: 'json',
                data: base64_upload_data,
                success: function(data){
                    if(typeof data.error == 'undefined'){
                        $('input[name="avatar-qiniu"]').val(QINIU + data.key);
                    }else{
                        layer.closeAll();   // 关闭加载层
                        layer.msg(data.error, { maxWidth: 260,});
                        event.preventDefault();     // 传递的回调的 '表单submit事件'，阻止表单提交
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    layer.closeAll();   // 关闭加载层
                    layer.msg('服务器上传图片异常！请及时联系技术人员！修复异常！', {time: 5000, maxWidth: 260});
                    event.preventDefault();     // 传递的回调的 '表单submit事件'，阻止表单提交
                }
            });
        }

参考文章：
	http://www.cnblogs.com/lamb97/p/6547089.html
	https://segmentfault.com/a/1190000000754560(这篇没咋看)

在添加个：
	手机端上传，裁剪，我使用的是cropper，这里再记录一个插件，可能也比较好用
		https://github.com/baijunjie/PhotoClip.js