iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >laravel 实现阿里云oss文件上传功能的示例
  • 815
分享到

laravel 实现阿里云oss文件上传功能的示例

2024-04-02 19:04:59 815人浏览 安东尼
摘要

1、定义路由 // 阿里云文件储存 Route::group(['prefix'=>'aliyun'], function(){ Route::get('sign'

1、定义路由


// 阿里云文件储存
Route::group(['prefix'=>'aliyun'], function(){
    Route::get('sign', 'AliyunController@sign');
}); 

2、编写 controller 层



    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、点击上传按钮,浏览器控制台输出链接,访问该链接,即可看到该图片

到此这篇关于laravel 实现阿里云oss文件上传功能的示例的文章就介绍到这了,更多相关laravel 阿里云oss文件上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: laravel 实现阿里云oss文件上传功能的示例

本文链接: https://www.lsjlt.com/news/137236.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • laravel 实现阿里云oss文件上传功能的示例
    1、定义路由 // 阿里云文件储存 Route::group(['prefix'=>'aliyun'], function(){ Route::get('sign'...
    99+
    2024-04-02
  • Python实现上传Minio和阿里Oss文件
    目录前言环境依赖代码补充前言 本文提供Python上传minio以及阿里oss文件工具,给自己留个记录。 环境依赖 安装minio以及oss2依赖 pip install min...
    99+
    2024-04-02
  • Vue Element UI + OSS怎么实现上传文件功能
    这篇文章主要为大家展示了“Vue Element UI + OSS怎么实现上传文件功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue Element UI...
    99+
    2024-04-02
  • php 文件上传至OSS及删除远程阿里云OSS文件
    删除的时候记住不要带域名,也不要带'/'这个路径符号,如全路径是:'https://hxty.oss-cn-beijing.aliyuncs.com/data/pdf/contrac...
    99+
    2024-04-02
  • Laravel框架实现点播上传阿里云功能
    1、确认框架中安装了第三方alibabacoud控件 实现代码如下 上传过程中遇到任务问题,可以进行留言 <?php namespace App\Api\xxx...
    99+
    2024-04-02
  • JavaSpringBoot实现文件上传功能的示例代码
    测试代码 pom.xml: <xml version="1.0" encoding="UTF-8"> <project xmlns="http://maven.ap...
    99+
    2024-04-02
  • flutter直接上传文件到阿里云oss
    目录代码实现调用上传的例子另一种方法准备工作:给一个工具类代码实现 以下是我写的一个上传oss的类,只需要替换ossAccessKeyId, ossAccessKeySecret,...
    99+
    2024-04-02
  • php中文件上传至OSS的示例分析
    小编给大家分享一下php中文件上传至OSS的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!删除的时候记住不要带域名,也不要带'/'这个路径...
    99+
    2023-06-20
  • Vue实现文件切片上传功能的示例代码
    目录流程简说获取文件的 MD5 唯一标识码文件切片获取文件名 name分片文件大小 chunkSize文件切片 chunkList 列表切片总数 chunks切片大小 size合并在...
    99+
    2022-11-13
    Vue文件切片上传 Vue文件切片
  • nodejs 实现简单的文件上传功能(示例详解)
    首先需要大家看一下目录结构,然后开始一点开始我们的小demo。 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能。 2.通过html的fo...
    99+
    2024-04-02
  • SpringBoot整合阿里云OSS对象存储服务实现文件上传
    目录1. 准备工作: 2. 配置: 3. 详细代码: 4. 测试: 1. 准备工作: 一、首先登录阿里云OSS对象存储控制台创建一个Bucket作为你的存储空间。 二、创建Acce...
    99+
    2024-04-02
  • SpringBoot实现文件上传与下载功能的示例代码
    目录Spring Boot文件上传与下载举例说明1.引入Apache Commons FileUpload组件依赖2.设置上传文件大小限制3.创建选择文件视图页面4.创建控制器5.创...
    99+
    2024-04-02
  • Laravel 8 文件的上传/下载/显示的实例
    如何实现对文件的操作,实现上传,下载,展示等等功能,我们通过编写一个简单的实例来了解其中具体的内容。 文件列表的展示/文件上传/文件下载 首先我们需要创建两个文件,一个视图文件,一个控制器,来实现前后端的互通,然后我们在 storage...
    99+
    2023-09-12
    laravel php
  • AntDesignUpload文件上传功能的实现
    目录一、Ant Design Vue文件上传功能二、Ant Design React文件上传功能总结一、Ant Design Vue文件上传功能 1.文件上传选项框 <a-m...
    99+
    2023-05-17
    Ant Design Upload Upload文件上传功能 Ant Design Upload文件上传
  • Springboot文件上传功能的实现
    目录1.新建文件上传页面2.新建文件上传处理Controller类3.文件上传功能测试4.文件上传路径回显5.多文件上传功能实现6.文件名不同时的多文件上传处理1.新建文件上传页面 ...
    99+
    2023-05-15
    springboot文件上传 springboot文件上传方法
  • Springboot集成阿里云OSS上传文件系统教程
    第一步:开通阿里云OSS服务,创建Bucket,获取id和密钥 第二步:根据官方文档编写上传代码 1.新建maven项目 添加依赖: <!-- 阿里云oss依赖 --...
    99+
    2024-04-02
  • java实现文件的上传功能
    本文实例为大家分享了java实现文件的上传功能的具体代码,供大家参考,具体内容如下 直接上代码了 一、上传界面 <%@ page language="java" content...
    99+
    2024-04-02
  • javaweb实现文件上传功能
    本文实例为大家分享了javaweb实现文件上传的具体代码,供大家参考,具体内容如下 1、创建一个空项目 2、新建一个web application 的Module 3、创建一个lib...
    99+
    2024-04-02
  • springmvc实现文件上传功能
    一个简单的springmvc文件上传例子 所需的依赖 只需要这个就好了。在idea的依赖关系图中,commons-fileupload包含了commons-io依赖 <d...
    99+
    2024-04-02
  • ASP.NET实现文件上传功能
    本文实例为大家分享了ASP.NET实现文件上传功能的具体代码,供大家参考,具体内容如下 1、搭建网站结构 2、编写网页文件 创建一个Web窗体UploadFile和UpFile文件...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作