美图秀秀web sdk集成阿里云OSS web直传，或者，OSS web直传使用

首先说一下，使用OSS web直传文件就没必要过服务器，可以减小服务器的压力和存储空间，比较方便。

此次的demo是项目中用到的，因为用到图片美化功能所以找了美图秀秀sdk，文件存储在oss上，所以找了web直传。demo地址会放到最后。

1、目录结构

uploader.js是阿里云给的功能，我简单的集成了一下jquery。

Upload.php是oss请求签名、回调的示例。用的是tp5.1。如果，出现类没有找到等错误，请自己use或者import一下。

2、美图秀秀说明

这里使用的是图片保存为base64功能，如果要用保存后自动回调到自己服务器地址的话，就不用再往下看了，可以直接去找美图秀秀的文档。

3、代码说明

index.html写的很少，应该比较清晰了。

<!-- oss 上传控件一定要引入，否则oss插件无法正常使用 -->
<div class="layui-form-item" id="oss_container" style="display: none;">
	<button id="selectfiles" class='layui-btn layui-btn-sm'>上传图片</button>
</div>
<!-- oss -->
<div class="layui-fluid layui-card" id="altContent">

</div>

以上包含两个部分：

    1、oss上传控件，这个一定要有，否则oss上传会不正常。

    2、id="altContent"，这个就是美图秀秀要填充的容器了。

<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script src="js/oss/uploader.js"></script>

<script>
	xiuxiu.setLaunchVars("customMenu", ["decorate", "facialMenu"]);
	/*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
	xiuxiu.embedSWF("altContent", 3, "100%", "100%");
	xiuxiu.onInit = function() {
		//设置保存模式为base64
		xiuxiu.setUploadType(3);
		xiuxiu.loadPhoto(url);
		xiuxiu.onSaveBase64Image = function(data, file_name, ext, id) {
			/**
			 * 构造File对象，oss接受的是File对象
			 * 这里使用了base64编码图片，构造File时，必须要base64转码再构造，否则文件就是错的
			 */
			ps_image = dataURLtoFile(data, file_name, ext);
			uploader.addFile([ps_image]);
			//上传文件
			$.autoUpload();
		}
	}

	//初始化上传控件
	uploader = $.initUploader({
		container: 'oss_container',
		multi_selection: true,
		done: function(up, file, info) {
			//设置文件信息
			info = eval('(' + info.response + ')');
		}
	});

	//将base64转换为文件
	var mime_base = {
		png: 'image/png',
		jpg: 'image/jpeg',
		jpeg: 'image/jpeg',
		gif: 'image/gif',
		bmp: 'image/bmp'
	};
	//将base64转换为文件
	function dataURLtoFile(data_url, file_name, ext) {
		var mime = mime_base[ext],
			bstr = atob(data_url),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while(n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new File([u8arr], file_name, {
			type: mime
		});
	}
</script>

上面js部分，重点是在onSaveBase64Image这个回调里面，千万不能直接调用new File([base64 code], file_name, {type: mime});来构造File对象，base64是需要转成正常的文件编码后才能使用的，不然文件内容都是错的，上传成功了也没法打开文件。

代码在这里：https://gitee.com/gtx_197/oss_web_upload