阿里云OSS ueditor 直接上传oss对象存储遇到的问题
2018-03-25 10:56
926 查看
1.首先下载百度ueditor 然后引进自己的项目
2.把下面的oss.php、oss_callback.php文件放在ueditor目录中的php下面
<?php
date_default_timezone_set('Asia/Shanghai');
$id = ''; 填写你的阿里云oss key_id
$key = '';填写你的阿里云oss key_secret
$host = '';填写你的阿里云oss 外网访问地址
$dir = 'Uploads/ueditor/'.date('Y').'/'.date('m').'/'.date('d').'/'; 填写你的阿里云创建的目录
function gmt_iso8601($time)
{
$dtStr = date("c", $time);
$mydatetime = new \DateTime($dtStr);
$expiration = $mydatetime->format(\DateTime::ISO8601);
$pos = strpos($expiration, '+');
$expiration = substr($expiration, 0, $pos);
return $expiration . "Z";
}
function get_config(){
global $id, $key, $host, $dir;
$now = time();
$expire = 120; //设置该policy超时时间是10s. 即这个policy过了这个有效时间,将不能访问
$end = $now + $expire;
$expiration = gmt_iso8601($end);
//最大文件大小.用户可以自己设置
$condition = array(0 => 'content-length-range', 1 => 0, 2 => 700000000);
$conditions[] = $condition;
//表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = array(0 => 'starts-with', 1 => '$key', 2 => $dir);
$conditions[] = $start;
$arr = array('expiration' => $expiration, 'conditions' => $conditions);
//echo json_encode($arr);
//return;
$policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$string_to_sign = $base64_policy;
$signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));
$response = array();
$response['accessid'] = $id;
$response['host'] = $host;
$response['policy'] = $base64_policy;
$response['signature'] = $signature;
$response['expire'] = $end;
//这个参数是设置用户上传指定的前缀
$response['dir'] = $dir;
return $response;
}
<?php
require_once 'oss.php';
echo json_encode([
'state' => 'SUCCESS',
'url' => $host.'/'.$_POST['filename'],
'title' => basename($_POST['filename']),
'original' => basename($_POST['filename']),
'type' => $_POST['mimeType'],
'size'=>$_POST['size']
]);
然后直接上传图片,如果你的阿里云oss控制后台没有设置跨域归会提示403 及不允许跨域
然后去阿里oss控制台设置跨越规则
遵循以下规则
在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
单击 基础设置 页签,找到 跨域设置 区域,然后单击 设置。
单击 创建规则,打开 设定跨域规则 对话框。
设置跨域规则。来源:指定允许的跨域请求的来源。允许多条匹配规则,以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。
允许 Methods:指定允许的跨域请求方法。
允许 Headers:指定允许的跨域请求 header。允许多条匹配规则,以回车为间隔。每个匹配规则使用最多一个“*”通配符。
暴露 Headers:指定允许用户从应用程序中访问的响应头(例如一个 Javascript 的 XMLHttpRequest 对象)。
缓存时间:指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间。说明: 每个存储空间最多可以配置 10 条规则。
单击 确定。
4000
不要遗漏了协议名http或https ,如果端口不是默认的
Method:按照需求开通对应的方法即可,调试时可以全部选择。
Allow Header:允许的跨域请求header。允许配置多条匹配规则,以回车间隔。在Access-Control-Request-Headers中指定的每个header,都必须在Allowed Header中有对应项。Header容易遗漏,没有特殊需求的情况下,建议设置为
Expose Header:暴露给浏览器的header列表,即用户从应用程序中访问的响应头(例如一个Javascript的XMLHttpRequest对象)。不允许使用通配符。具体的配置需要根据应用的需求确定,只暴露需要使用的header。如果不需要暴露可以不填。大小写不敏感。该项是可选配置项。
缓存时间(MaxAgeSeconds):浏览器对特定资源的预取请求(OPTIONS请求)返回结果的缓存时间,单位为秒。如果没有特殊情况可以稍大一点,比如60秒。该项是可选配置项。
CORS的配置方法一般是针对每个访问来源单独配置规则,不将多个来源混到一个规则,多个规则之间不要有覆盖冲突。其它的选项只开放需要的权限即可。
CORS报错一般是站点类应用导致,浏览器中可以查看请求详情。如Chrome,按
OSS返回的错误可以通过抓包获取。如使用Wireshark,筛选器可以指定为
OSS返回的错误也可以通过CORS的调试程序 oss-h5-upload-js-direct 界面提示获取。
我这边在本地调试的所以规则就如下设置的
然后再去上传,就不会报错了,
2.把下面的oss.php、oss_callback.php文件放在ueditor目录中的php下面
<?php
date_default_timezone_set('Asia/Shanghai');
$id = ''; 填写你的阿里云oss key_id
$key = '';填写你的阿里云oss key_secret
$host = '';填写你的阿里云oss 外网访问地址
$dir = 'Uploads/ueditor/'.date('Y').'/'.date('m').'/'.date('d').'/'; 填写你的阿里云创建的目录
function gmt_iso8601($time)
{
$dtStr = date("c", $time);
$mydatetime = new \DateTime($dtStr);
$expiration = $mydatetime->format(\DateTime::ISO8601);
$pos = strpos($expiration, '+');
$expiration = substr($expiration, 0, $pos);
return $expiration . "Z";
}
function get_config(){
global $id, $key, $host, $dir;
$now = time();
$expire = 120; //设置该policy超时时间是10s. 即这个policy过了这个有效时间,将不能访问
$end = $now + $expire;
$expiration = gmt_iso8601($end);
//最大文件大小.用户可以自己设置
$condition = array(0 => 'content-length-range', 1 => 0, 2 => 700000000);
$conditions[] = $condition;
//表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = array(0 => 'starts-with', 1 => '$key', 2 => $dir);
$conditions[] = $start;
$arr = array('expiration' => $expiration, 'conditions' => $conditions);
//echo json_encode($arr);
//return;
$policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$string_to_sign = $base64_policy;
$signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));
$response = array();
$response['accessid'] = $id;
$response['host'] = $host;
$response['policy'] = $base64_policy;
$response['signature'] = $signature;
$response['expire'] = $end;
//这个参数是设置用户上传指定的前缀
$response['dir'] = $dir;
return $response;
}
<?php
require_once 'oss.php';
echo json_encode([
'state' => 'SUCCESS',
'url' => $host.'/'.$_POST['filename'],
'title' => basename($_POST['filename']),
'original' => basename($_POST['filename']),
'type' => $_POST['mimeType'],
'size'=>$_POST['size']
]);
然后直接上传图片,如果你的阿里云oss控制后台没有设置跨域归会提示403 及不允许跨域
然后去阿里oss控制台设置跨越规则
遵循以下规则
操作步骤
进入 OSS 管理控制台 界面。在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
单击 基础设置 页签,找到 跨域设置 区域,然后单击 设置。
单击 创建规则,打开 设定跨域规则 对话框。
设置跨域规则。来源:指定允许的跨域请求的来源。允许多条匹配规则,以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。
允许 Methods:指定允许的跨域请求方法。
允许 Headers:指定允许的跨域请求 header。允许多条匹配规则,以回车为间隔。每个匹配规则使用最多一个“*”通配符。
暴露 Headers:指定允许用户从应用程序中访问的响应头(例如一个 Javascript 的 XMLHttpRequest 对象)。
缓存时间:指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间。说明: 每个存储空间最多可以配置 10 条规则。
单击 确定。
配置项
CORS配置有以下几项:来源(AllowedOrigin):允许跨域请求的来源,可以同时指定多个。配置时需带上完整的域信息,例如http://10.100.100.100:8001或
https://www.aliyun.com。注意,
4000
不要遗漏了协议名http或https ,如果端口不是默认的
80,还需要带上端口。如果不能确定的域名,可以打开浏览器的调试功能,查看header中的
Origin。域名支持通配符
*,每个域名中允许最多使用一个
*,例如
https://*.aliyun.com。如果来源指定为
*,则表示允许所有来源的跨域请求。
Method:按照需求开通对应的方法即可,调试时可以全部选择。
Allow Header:允许的跨域请求header。允许配置多条匹配规则,以回车间隔。在Access-Control-Request-Headers中指定的每个header,都必须在Allowed Header中有对应项。Header容易遗漏,没有特殊需求的情况下,建议设置为
*,表示允许所有。大小写不敏感。
Expose Header:暴露给浏览器的header列表,即用户从应用程序中访问的响应头(例如一个Javascript的XMLHttpRequest对象)。不允许使用通配符。具体的配置需要根据应用的需求确定,只暴露需要使用的header。如果不需要暴露可以不填。大小写不敏感。该项是可选配置项。
缓存时间(MaxAgeSeconds):浏览器对特定资源的预取请求(OPTIONS请求)返回结果的缓存时间,单位为秒。如果没有特殊情况可以稍大一点,比如60秒。该项是可选配置项。
CORS的配置方法一般是针对每个访问来源单独配置规则,不将多个来源混到一个规则,多个规则之间不要有覆盖冲突。其它的选项只开放需要的权限即可。
错误排除
报错
CORS配置错误会报如下错误:浏览器报类似如下错误:OPTIONS http://bucket.oss-cn-beijing.aliyuncs.com/ XMLHttpRequest cannot load http://bucket.oss-cn-beijing.aliyuncs.com/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{yourwebsiet}' is therefore not allowed access. The response had HTTP status code 403.OSS报如下错误:
<Code>AccessForbidden</Code> <Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Requet-Headers are not whitelisted by the resource's CORS spec.</Message>提示:
CORS报错一般是站点类应用导致,浏览器中可以查看请求详情。如Chrome,按
F12打开
开发者工具,在
Network中查看相应元素;
OSS返回的错误可以通过抓包获取。如使用Wireshark,筛选器可以指定为
host bucket-name.oss-cn-beijing.aliyuncs.com。
OSS返回的错误也可以通过CORS的调试程序 oss-h5-upload-js-direct 界面提示获取。
我这边在本地调试的所以规则就如下设置的
来源 | 允许 Methods | 允许 Headers | 暴露 Headers | 缓存时间(秒) | 操作 |
---|
http://localhost | GETPOSTPUTHEADDELETE | access-control-allow-origin | 60 |
相关文章推荐
- C# .net Ueditor实现图片上传到阿里云OSS 对象存储
- Spring+SpringMVC+Mybatis整合百度富文本编辑器Ueditor,上传图片到阿里云OSS对象存储。
- Java使用阿里云OSS对象存储上传图片
- 阿里云对象存储OSS配置介绍设置,上传代码示例
- 阿里云OSS直传多文件上传遇到的问题及解决方案
- file does not exist 阿里云OSS图片上传遇到的问题
- thinkPHP实现对象存储oss,将图片上传到阿里云oss
- Java使用阿里云OSS对象存储上传图片
- 阿里云oss对象存储图片上传
- 上传文件到阿里云OSS对象存储,查询访问地址,删除文件
- 全面了解阿里云对象存储OSS_功能、工具、应用及常见问题
- Laravel整合UEditor编辑器使用阿里云OSS存储(二)改造UEditor上传OSS
- Laravel整合UEditor编辑器使用阿里云OSS存储(二)改造UEditor上传OSS
- Laravel中上传视频至阿里云对象存储OSS中
- thinkPHP实现对象存储oss,将图片上传到阿里云oss
- Java使用阿里云OSS对象存储上传图片
- 阿里云对象存储OSS--实现随时随地上传文件到阿里云
- 上传阿里云oss对象型存储 本地文件和上传流上传
- Java使用阿里云OSS对象存储上传图片
- Java实现阿里云OSS云存储对象之上传图片