laravel 实现阿里云oss文件上传功能的示例
作者:Zion0707 时间:2023-06-13 20:39:26
1、定义路由
// 阿里云文件储存
Route::group(['prefix'=>'aliyun'], function(){
Route::get('sign', 'AliyunController@sign');
});
2、编写 controller 层
/**
* 返回OSS的签名验证
* @return JSON 签名信息
*/
public function sign(Request $request)
{
//初始化一下必要的请求数据
$id = 'xxx'; //AccessKeyId
$key = 'xxx'; //AccessKeySecret
$host = '//xxx.oss-cn-shenzhen.aliyuncs.com'; //OSS库地址
$cdn_host = "//img.xxx.com"; //真实的访问地址
$dir = 'test/'; //上传目录设置
$callbackUrl = url('upload/callback'); //上传回调的地址
//上传回调的参数,callbackUrl地址,callbackBody回调接收的参数,callbackBodyType通过POST调用的回调函数,所以要设置这个头
$callback_param = array(
'callbackUrl' => $callbackUrl,
'callbackBody' => 'filename=${object}&size=${size}&mimeType =${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}',
'callbackBodyType' => "application/x-www-form-urlencoded"
);
$callback_string = json_encode($callback_param); //转换成json格式
$base64_callback_body = base64_encode($callback_string); //要返回的回调函数参数信息
//设置过期时间
$now = time();
$expire = 60 * 60 * 2; //设置该policy超时时间是 2小时. 即这个policy过了这个有效时间,将不能访问,这里可以根据自己的token过期时间来设置
$end = $now + $expire;
$expiration = $this->gmt_iso8601($end); //进行时间格式的转换
//处理上传限制条件
//最大文件大小.用户可以自己设置
$condition = array(0 => 'content-length-range', 1 => 0, 2 => 1048576000);
$conditions[] = $condition; //设定文件大小
//表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = array(0 => 'starts-with', 1 => '$key', 2 => $dir);
$conditions[] = $start; //必须以设定的目录开头,防止上传错误
$arr = array('expiration' => $expiration, 'conditions' => $conditions);
$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(
'accessid' => $id, //accessid
'host' => $host, //上传地址
'cdn_host' => $cdn_host, //真实的访问地址
'policy' => $base64_policy, //上传文件限制
'signature' => $signature, //签名信息
'expire' => $end, //失效时间
'callback' => $base64_callback_body, //上传回调参数
'dir' => $dir //上传的目录
);
return response()->json([
'code' => 0,
'msg' => 'success',
'data' => $response
]);
}
//格式化时间,格式为2020-07-07T23:48:43Z
public function gmt_iso8601($time)
{
$dtStr = date("c", $time);
$pos = strpos($dtStr, '+');
$expiration = substr($dtStr, 0, $pos);
return $expiration . "Z";
}
3、查看接口返回
4、前端界面及操作编写,这里采用的是 vue
<template>
<div class="test" style="padding:100px 0px 1000px 0px;">
<div>
<input type="file" id="file" name="file" />
<a @click="upload()" href="javascript:;" rel="external nofollow" >上传</a>
</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted() {
this.getOssToken();
},
methods: {
//获取上传通行证
getOssToken(){
var _self = this;
this.axios.get('/aliyun/sign').then((res)=>{
var data = res.data;
if(data.code==0){
_self.aliyunOssToken = data.data;
}else{
_self.$message.warning(data.msg);
}
});
},
upload(){
var _self = this;
var getSuffix = function (fileName) {
var pos = fileName.lastIndexOf(".");
var suffix = '';
if (pos != -1) {
suffix = fileName.substring(pos);
}
return suffix;
}
var file = $("#file").val();
if (file.length == 0) {
alert("请选择文件");
}
var oFileName = file.lastIndexOf('\\');
var oFileName = file.substr(oFileName+1);
var fileName = oFileName.lastIndexOf('.');
var fileName = oFileName.substr(0,fileName);
console.log(fileName);
var filename = new Date().getTime() + getSuffix(file);
var formData = new FormData();
//注意formData里append添加的键的大小写
formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
formData.append('policy', _self.aliyunOssToken.policy); //policy
formData.append('Signature', _self.aliyunOssToken.signature); //签名
formData.append("file", $("#file")[0].files[0]);
formData.append('success_action_status', 200); //成功后返回的操作码
var url = _self.aliyunOssToken.host;
var fileUrl = _self.aliyunOssToken.cdn_host +'/'+ _self.aliyunOssToken.dir + filename;
$.ajax({
url: url,
type: 'POST',
data: formData,
// async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(fileUrl);
console.log(data);
},
error: function (data) {
console.log(data);
}
});
}
}
}
</script>
5、点击上传按钮,浏览器控制台输出链接,访问该链接,即可看到该图片
来源:https://www.cnblogs.com/zion0707/p/12118661.html
标签:laravel,阿里云,oss,文件上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue项目两种方式实现竖向表格的思路分析
2024-06-05 15:31:13
![](https://img.aspxhome.com/file/2023/1/123131_0s.png)
简单的命令查看安装的python版本号
2022-03-12 17:23:06
![](https://img.aspxhome.com/file/2023/8/88838_0s.png)
Python数据类型最全知识总结
2022-01-13 14:18:48
![](https://img.aspxhome.com/file/2023/2/127852_0s.png)
基于Django框架的权限组件rbac实例讲解
2022-09-27 17:11:51
![](https://img.aspxhome.com/file/2023/2/72032_0s.jpg)
微信小程序开发之tabbar图标和颜色的实现
2024-06-20 01:43:02
![](https://img.aspxhome.com/file/2023/8/56638_0s.png)
Python操作Elasticsearch处理timeout超时
2022-04-23 02:42:18
![](https://img.aspxhome.com/file/2023/4/128584_0s.png)
perl用变量做句柄介绍
2022-12-18 22:19:01
Python利用heapq实现一个优先级队列的方法
2021-08-05 06:28:48
![](https://img.aspxhome.com/file/2023/6/89446_0s.jpg)
asp版FCKEditor编辑器的用法
2008-07-05 12:15:00
设计与表达
2009-07-27 11:45:00
![](https://img.aspxhome.com/file/UploadPic/20097/27/0907_sheji_biaoda_01-84s.jpg)
python用tkinter实现一个简易能进行随机点名的界面
2022-07-01 21:08:58
![](https://img.aspxhome.com/file/2023/2/135302_0s.png)
详解tensorflow之过拟合问题实战
2022-08-13 00:46:30
![](https://img.aspxhome.com/file/2023/8/83688_0s.png)
js实现浏览器倒计时跳转页面效果
2023-07-18 06:49:57
![](https://img.aspxhome.com/file/2023/5/55915_0s.jpg)
python 读取txt,json和hdf5文件的实例
2022-02-18 10:43:34
NumPy实现ndarray多维数组操作
2023-07-14 13:56:50
Go如何实现HTTP请求限流示例
2023-07-21 00:40:27
使用pandas实现连续数据的离散化处理方式(分箱操作)
2023-08-28 21:45:51
sqlserver 导出插入脚本代码
2024-01-26 22:39:18
MySQL 的启动选项和系统变量实例详解
2024-01-23 06:04:52
![](https://img.aspxhome.com/file/2023/0/69250_0s.png)
Pytorch卷积神经网络迁移学习的目标及好处
2022-05-21 07:23:17
![](https://img.aspxhome.com/file/2023/1/65871_0s.png)