thinkphp5 结合 阿里oss进行多图上传(18年6月28日开发完成)

thinkphp5结合阿里oss 多图上传,刚刚完成 最新的 ,哈哈,我们来看一下。

首先就是下载阿里云的oss包了,我是用composer下载的,下载命令是

composer require aliyuncs/oss-sdk-php  执行完 等着 就行,完事之后会在vendor下生成阿里云的包,如下图所示:

然后 你要准备你的oss一些帐号  ,需要四个东西把 大概

分别是

$accessKeyId, $accessKeySecret, $endpoint,$bucket.其中前2个是自动生成的,第三个也是现成的 就是一个 网络地址 例如
http://oss-cn-hangzhou.aliyuncs.com第四个bucket需要你新建一个bucket,然后自己命名,命名好了 拿来就能用了,都完事了就开发把。

首先是common.php,存的是调用阿里oss的公共方法,如下图
 1 <?php
 2 namespace app\index\controller;
 3
 4 use think\Controller;
 5 use think\Config;
 6 use OSS\OssClient;
 7 use OSS\Core\OssException;
 8 class common extends Controller
 9 {
10     Public function moveOss($accessKeyId,$accessKeySecret,$endpoint,$bucket,$object,$content)
11     {
12         try {
13             $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
14             $res= $ossClient->putObject($bucket, $object, $content);
15         } catch (OssException $e) {
16             print $e->getMessage();
17         }
18         return $res[‘info‘][‘url‘];
19     }
20 }

然后新建一个index.php来继承common.php

<?php
namespace app\index\controller;

use think\Controller;
use think\File;
class Index extends common
{

    public function index()
    {
        error_reporting(0);
        header("Content-type:text/html;charset=utf-8");
        if($this->request->isPost()){
            $arrList1= $_FILES[‘image‘][‘name‘];
            $arrList2= $_FILES[‘image‘][‘tmp_name‘];
            $info2=array();
            for($i=0;$i<count($arrList1);$i++){
                $object= $arrList1[$i];
                $content=file_get_contents($arrList2[$i]);
                $info=$this->moveOss(‘LTAIGJHbVAIejTF9‘,‘shSZbjwZVz3OvAWMPESVFqrDO2TpYo‘,
                    ‘http://oss-cn-hangzhou.aliyuncs.com‘,‘guanlutu‘,$object,$content);
                $arr2[]=$info;
              //echo $info;echo "<br/>";
            }
           $result=implode(‘;‘,$arr2);
           print_r($result);

        }else{
            return view();
        }

    }

}

最后一步就是 view页面了  view/index/index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo" action="{:url(‘index/index‘)}">
    <table>
        <tr>
            <td>上传文件:</td>
            <td><input type="file" name="image[]" multiple="multiple"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="上传" ></td>
        </tr>
    </table>
</form>
</body>
</html>

其中要说的是

multiple="multiple"  这个属性 支持大部分pc浏览器和微信浏览器 可以直接多图上传,电脑的话按住ctrl键选择图片就可以了,就是这样,有问题群里找我把。

原文地址:https://www.cnblogs.com/HoverM/p/9241628.html

时间: 2024-11-09 11:00:55

thinkphp5 结合 阿里oss进行多图上传(18年6月28日开发完成)的相关文章

多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

Java企业微信开发_08_JSSDK多图上传

一.本节要点 1.1可信域名 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),可在企业微信的管理后台“我的应用”里设置应用可信域名.这个域名必须要通过ICP备案,不然jssdk会配置失败 1.2JS-SDK使用权限签名算法 1.2.1 签名生成规则如下: (1)参与签名的字段包括: noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) . (2)对所有待签名参数按照字段名的ASCII

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧!

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多图上传,所以今天我们来一起撸一下,怎么去思考这个实现逻辑! 这里我想到的思路是比较简单的,首先,我们有一个按钮,按钮是上传图片,点击之后弹出某个界面进行图片的选择,一般是九张图片或者十二张,选完之后就直接上传了,大致的流程应该是这个样子,那我们首先来写个按钮 activity_main.xml <?

02-iOS 使用AFN 进行单图和多图上传

//1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager];    [manager POST:urlString parameters:params constructingBodyWithBlock:^(id_Nonnull formData) { //使用日期生成图片名称 NSDateFormatter *formatter = [[NSDateFormatter al

微信jssdk多图上传

微信官方文档uploadImage函数一次只能上传一张图片,但实际运用中有不少多图上传的需求 当选择多张图片时若直接循环多次调用,只有最后一张能上传成功,因为uploadImage只有在上次一执行成功或者失败以后才能再次调用,因此把该函数稍作修改即可 //选择图片function choose(num){ wx.chooseImage({ count: num, // 默认9 sizeType: ['compressed'], success: function (res) { var loca

百度Ueditor编辑器取消多图上传对话框中的图片搜索

百度Ueditor确实是一个非常强悍的编辑器,功能强大!但是实际开发需求复杂,总会有各种不符合要求的,比如想要取消多图上传的“图片搜索”选项卡(这个图片搜索真心难用)! 以ueditor 1.4.3为例: 1.打开ueditor1.4.3\dialogs\image\image.html 2.删除第25行 <span class="tab" data-content-id="search"><var id="lang_tab_search

yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 文件上传也写过几篇文章了,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛

单独调用kindeditor的多图上传组件实现多图上传

本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog.html Html JS