锐客网

  1. 首页 > 睿知 > it技术 > >

php数据上传到oss php数据上传到服务器( 二 )

IT技术Bokeh


本例子的功能
1.采用plupload 直接提高表单数据(即PostObject)到OSS2.支持html5,flash,silverlight,html4 等协议上传3. 可以运行在PC浏览器，手机浏览器，微信等4.可以选择多文件上传
5.显示上传进度条
6.可以控制上传文件的大小
OSS的PostObject API细节可以参照(看不懂没有关系)：
;PostObjectplupload
plupload是一款简单易用且功能强大，拥有多种上传方式，(html5, flash,silverlight, html4)等方式 ， 会智能检测当前环境选择最适合的方式，并且会优先采用Html5，所以不用花心思去当前的浏览器要用何种方式上传，plupload会帮您考虑好 。
关键代码
因为OSS原生支持POST协议 。所以只要将plupload在发送POST请求时，带上OSS签名即可 。
核心代码如下：
复制代码
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles',
//runtimes : 'flash',
container: document.getElementById('container'),flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',url : host,
multipart_params: {
'Filename': '${filename}',
'key' : '${filename}',
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': signature,
},
....
}
签名signature主要是对policyText进行签名，最简单的例子如下：
复制代码
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后 ， 就没有办法通过这个policy上传文件了"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制,如果超过了这个大?。?文件上传到OSS会报错的]
}
Cors
注意：如果一定要保证bucket属性Cors设置支持POST方法 。因为这个HTML直接上传到OSS ， 会产生跨域请求 。必须在bucket属性里面设置允许跨域设置如下图：
进阶篇－应用服务器php返回签名
背景
上述例子有一个很严重的安全隐患 。就是OSS AccessId/AccessKey暴露在前端页面 。可以随意拿到accessid/accesskey. 这是非常不安全的做法将此例子进化，签名及上传policy从后端php代码取 。
请求逻辑是：
1.客户端要上传图片时,到应用服务器取上传的policy及签名2.客户端拿到签名直接上传到OSS
示例
直接用网页访问：用手机测试该上传是否有效 。二维码：可以用手机(微信，QQ ， 手机浏览器等）扫一扫试试（这个不是广告，只是上述网址的二维码 。这为了让大家看一下这个实现能在手机端完美运行 。）文件上传是上传到一个测试的公共 bucket , 会定时清理 ， 所以不要传一些敏感及重要数据代码下载
oss-h5-upload-js-php.tar.gz (382 K) 下载次数:600原理
设置plupload 上传参数如下：
复制代码
multipart_params: {
'key' : key + '${filename}'　//后面会介绍到 ， key是应用服务器返回的，指定用户必须以这个前缀上传文件 。
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', //让服务端返回200,不然 ， 默认会返回204'signature': signature,
},
js最主要是从后端取到policyBase64, 及accessid,及signature这三个变量 。往后端取这三个变量核心代码如下：
复制代码
phpUrl = './php/get.php'
xmlhttp.open( "GET", phpUrl, false );
xmlhttp.send( null );
var obj = eval ("(" + xmlhttp.responseText+ ")");host = obj['host']
policyBase64 = obj['policy']
accessid = obj['accessid']
signature = obj['signature']

推荐阅读


上一篇：postgresql系统找不到指定路径，sqlserver找不到指定路径

下一篇：国货直播无人购买怎么弄，无人直播带货是怎么操作的