ThinkPHP5 上传图片

上传到本地

上传文件

ThinkPHP5.0对文件上传的支持更加简单。

假设表单代码如下:

<form action="/index/index/upload" enctype="multipart/form-data" method="post">
<input type="file" name="image" /> <br> 
<input type="submit" value="上传" /> 
</form> 
然后在控制器中添加如下的代码:

public function upload(){
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('image');
    
    // 移动到框架应用根目录/public/uploads/ 目录下
    if($file){
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
            // 成功上传后 获取上传信息
            // 输出 jpg
            echo $info->getExtension();
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            echo $info->getSaveName();
            // 输出 42a79759f284b767dfcb2a0197904287.jpg
            echo $info->getFilename(); 
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }
}
move方法成功的话返回的是一个\think\File对象,你可以对上传后的文件进行后续操作。

多文件上传
如果你使用的是多文件上传表单,例如:

<form class="form form-horizontal"  method="post" action="{:url('admin/article/addArticle')}" enctype="multipart/form-data">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">图集:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input id="file-0" type="file" multiple class="file" name="path[]" >
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<input class="btn btn-primary radius"  type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>

控制器代码可以改成:

 public function addArticle()
    {
        //判断提交的方式
        if(\request()->isPost()){
            //多图上传
            $arryFile =\request()->file("path");
            $arrImg=[];
            foreach ($arryFile as $File){
                $pathImg="";
                //移动文件到框架应用更目录的public/uploads/
                $info = $File->move(ROOT_PATH . 'public' . DS . 'upload' . DS . 'article' . DS . date('Y') . DS . date('m-d'),md5(microtime(true)));
                if ($info) {
                    $pathImg = "/public/upload/article/" . date('Y') . '/' . date('m-d') . '/' . $info->getFilename();
                } else {
                    //错误提示用户
                    return $this->error($File->getError());
                }
//                $result["img_url"]
                $arrImg[]= $pathImg;
            }
            $insert_data["img_url"]=implode(",",$arrImg);
            Db::name("articles")->insert($insert_data);
        }
        return $this->fetch("article-add");
    }
上传验证

支持对上传文件的验证,包括文件大小、文件类型和后缀:


public function upload(){
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('image');
    // 移动到框架应用根目录/public/uploads/ 目录下
    $info = $file->validate(['size'=>15678,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');
    if($info){
        // 成功上传后 获取上传信息
        // 输出 jpg
        echo $info->getExtension();
        // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
        echo $info->getSaveName();
        // 输出 42a79759f284b767dfcb2a0197904287.jpg
        echo $info->getFilename(); 
    }else{
        // 上传失败获取错误信息
        echo $file->getError();
    }
}

**

## 上传到七牛云

**
1-安装七牛云官方SDK

composer require qiniu/php-sdk -vvv

2-七牛云配置

1----config文件
 
//七牛云配置
    'qiniu' => [
        'accessKey' => '.......................................',
        'secretKey' => '.......................................',
        'domain' => '.............................',//域名地址
        'bucket' => '......',//空间名称
        'zone'=> 'south_china'//区域
    ],
3- 对应的控制器

use Qiniu\Auth;
require 'vendor/qiniu/php-sdk/autoload.php';  //引入自动加载类
use Qiniu\Storage\UploadManager; //实例化上传类
 
 
 
 
public function add(){
      $file = request()->file('img');
                // 要上传图片的本地路径
                $filePath = $file->getRealPath();
                $ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION);  //后缀
                // 上传到七牛后保存的文件名
                $key =substr(md5($file->getRealPath()) , 0, 5). date('YmdHis') . rand(0, 9999) . '.' . $ext;
                // 需要填写你的 Access Key 和 Secret Key
                // 构建鉴权对象
                $accessKey =config("qiniu")["accessKey"];
                $secretKey =config("qiniu")["secretKey"];
                $auth=new Auth($accessKey,$secretKey);
                // 要上传的空间
                $bucket =config("qiniu")["bucket"];
                //域名
                $domain=config("qiniu")["domain"];
                $token = $auth->uploadToken($bucket);
                // 初始化 UploadManager 对象并进行文件的上传
                $uploadMgr = new UploadManager();
                // 调用 UploadManager 的 putFile 方法进行文件的上传
                list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);
                if ($err !== null) {
                    return ["err"=>1,"msg"=>$err,"data"=>""];
                } else {
                    //返回图片的完整URL
                    $imgPath=$domain.'/'.$key;
                    //赋值
                    $data["thumb_url"] = $imgPath;
                    $data = Db::name('top_bar')->insert($data);
                    $this->redirect("/admin/topbar/index");
                }
 
 
}


**

## 上传到阿里云OSS

**
1.下载一个阿里云oss的sdk 也可以到阿里云 的OSS存储里面去下载

composer require aliyuncs/oss-sdk-php
2-在application同级目录的config.php的文件,配置信息放进去向下面这样

    <?php

    'appliy_oss'=>[
        'KeyId'      => '',  //Access Key ID
        'KeySecret'  => '',  //Access Key Secret
        'Endpoint'   => '',  //阿里云oss 外网地址endpoint
        'Bucket'     => '',  //Bucket名称
    ]
3-控制器

方法(一)

/*
     * 图片上传到阿里云OSS
     */
    public function upload_img_oss(){
        $type=input("param.type","files");
        $img = request()->file('file');
        $resResult = Image::open($img);
        // 尝试执行
        try {
            $config = Config('appliy_oss'); //获取Oss的配置
            //实例化对象 将配置传入
            $ossClient = new OssClient($config['KeyId'], $config['KeySecret'], $config['Endpoint']);

            //这里是有sha1加密 生成文件名 之后连接上后缀
            $fileName = $type.'/' . sha1(date('YmdHis', time()) . uniqid()) . '.' . $resResult->type();
            //执行阿里云上传
            $result = $ossClient->uploadFile($config['Bucket'], $fileName, $img->getInfo()['tmp_name']);
            /**
             * 这个只是为了展示
             * 可以删除或者保留下做后面的操作
             */
            /*$arr = [
                //图片地址
                'imgurl' => $result['info']['url'],
                //数据库保存名称
                'dbimgName' => $fileName
            ];*/
            return json(["code"=> 1, "msg" => "上传成功", "url" => $result['info']['url']]);

        } catch (OssException $e) {
            // 上传失败获取错误信息0
            return json(["code"=> 0, "msg" => $e->getMessage(), "url" => '']);
//            return
        }
        /*//将结果输出
        return $arr;*/
    }
方法(二)

    /*
     * 图片上传到阿里云OSS
     */
    public function upload_oss(){
            $type=input("param.type","files");
            $file = $_FILES;
            $img = current($file);
            // 尝试执行
            try {
                $config = Config('appliy_oss'); //获取Oss的配置
                    //实例化对象 将配置传入
                $ossClient = new OssClient($config['KeyId'], $config['KeySecret'], $config['Endpoint']);
                 //获取文件后缀
                $file_type=substr($img["type"],strripos($img["type"],"/")+1);
                //这里是有sha1加密 生成文件名 之后连接上后缀
                $fileName = $type.'/' . sha1(date('YmdHis', time()) . uniqid()). '.' .$file_type;
                //执行阿里云上传
                $result = $ossClient->uploadFile($config['Bucket'], $fileName, $img['tmp_name']);
                /**
                * 这个只是为了展示
                 * 可以删除或者保留下做后面的操作
                 */
                 /*$arr = [
                            //图片地址
                            'imgurl' => $result['info']['url'],
                            //数据库保存名称
                            'dbimgName' => $fileName
                  ];*/
               return json(["code"=> 1, "msg" => "上传成功", "url" => $result['info']['url']]);
            } catch (OssException $e) {
                // 上传失败获取错误信息0
                return json(["code"=> 0, "msg" => $e->getMessage(), "url" => '']);
           }
    }


## 上传到阿里云OSS2

config 配置文件

'local_upload_path'=>ROOT_PATH . 'public' . DS . 'uploads',
    'oss'=>[
        'accessKeyId' => "XXXXXXXXXXXXXXXX",
        'accessKeySecret' => "XXXXXXXXXXXXXXXX",
        // Endpoint以杭州为例,其它Region请按实际情况填写。
        'endpoint' => "XXXXXXXXXXXXXXXX",
        // 存储空间名称
        'bucket'=> "XXXXXXXXXXXXXXXX",
        // 文件名称
        'object' => "XXXXXXXXXXXXXXXX"
    ],
/**
* 上传图片到本地
*/

    public function upload(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('myfile');

        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(config('local_upload_path'));
            if($info){
                // 成功上传后 获取上传信息
                $target = config('local_upload_path').DS.$info->getSaveName();
                //上传到oss
                $res = $this->oss_upload($target, $info->getFilename());
                exit(json_encode($res));
            }else{
                // 上传失败获取错误信息
                //echo $file->getError();
                exit(json_encode(array('code'=>2,'mes'=>$file->getError())));
            }
        }
    }
/**
 * 上传图片到阿里云oss
 * @param $target 文件路径
 * @param $filename 上传oss时文件名
 * @return mixed
 */
    public function  oss_upload($target,$filename){
        import('aliyun.autoload');
        $accessKeyId = config('oss.accessKeyId');
        $accessKeySecret = config('oss.accessKeySecret');
        // Endpoint以杭州为例,其它Region请按实际情况填写。
        $endpoint = config('oss.endpoint');
        // 存储空间名称
        $bucket= config('oss.bucket');
        // 文件名称
        $object = config('oss.object');


        $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint);
        try {
            $res = $ossClient->doesBucketExist($bucket);
        } catch (\OSS\Core\OssException $e) {
            $result['mes'] = $e->getMessage();
            $result['code'] = 3;
            return $result;
        }

        if ($res === true) {
            try {
                $object = $object.'/'.$filename;
                $info = $ossClient->uploadFile($bucket, $object, $target);
                $result['message'] = '上传成功';
                $result['code'] = 0;
                $result['pic'] = $info['info']['url'];
                return $result;
            } catch (\OSS\Core\OssException $e) {
                $result['mes'] = $e->getMessage();
                $result['code'] = 4;
                return $result;
            }
        } else {
            $result['message'] = '服务端存储空间不存在';
            $result['code'] = 1;
            return $result;
        }

    }


## AjAx提交图片

1--单图上传
html 代码 如下
{include file="common/blank" /}
<![endif]-->
<!--/meta 作为公共模版分离出去-->

<title>添加用户 - H-ui.admin v3.1</title>
<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.1,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-member-add" enctype="multipart/form-data">

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>会员名:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="user_name" name="user_name">
			</div>
		</div>

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="password" name="password">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>头像:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input class="file" type="file" name="file" id="file">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" placeholder="@" name="email" id="email">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>状态:</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input type="radio" id="status-1" name="status" value="1"  checked>
					<label for="status-1">已启用</label>
				</div>
				<div class="radio-box">
					<input type="radio" id="status-0" name="status" value="0">
					<label for="status-0">已禁用</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" onclick="check()" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
{include file="common/footer" /}
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-member-add").validate({
		rules:{
			user_name:{
				required:true,
				minlength:2,
				maxlength:16
			},
			status:{
				required:true,
			},
			email:{
				required:true,
				email:true,
			},
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
		}
	});
});

function check() {
    var user_name = $.trim($('#user_name').val());
    var email = $.trim($('#email').val());
    var phone = $.trim($('#phone').val());
    var password = $.trim($('#password').val());
    var status = $('input[name=status]:checked').val();
    if(user_name=="" || email=="" || phone=="" || password==""){
        layer.msg('请填写信息',{icon:2,time:2000});
        return false;
    }
    var formData = new FormData();
    formData.append("file", $("#file").get(0).files[0]);
    formData.append("user_name", user_name);
    formData.append("email", email);
    formData.append("phone", phone);
    formData.append("password", password);
    formData.append("status", status);
    $.ajax({
        url:"{:url('admin/user/addUser')}",
        type:'POST',
        data:formData,
        cache: false,
        contentType: false,    //不可缺
        processData: false,    //不可缺
        success:function(data){
            var data=JSON.parse(data);
            var msgs=data.msg;
            if(data.status == 1){
                layer.msg(msgs, {
                    icon: 1,
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)
                }, function(){
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.$('.btn-primary').click();
                    window.parent.location.reload();
                    parent.layer.close(index);
                });
            }else{
                layer.msg(msgs,{icon:2,time:2000});
            }
        }
    });

}

</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
控制器代码如下
public function addUser(){
        if(\request()->isPost()){
            $insert_array=array();
            $insert_array["user_name"]=input("user_name");
            $insert_array["password"]=password_hash(input("password"),1);
            $insert_array["email"]=input("email");
            $insert_array["phone"]=input("phone");
            $insert_array["status"]=input("status");
            $insert_array["last_time"]=time();
            $insert_array["last_ip"]=\request()->ip();
            $insert_array["add_time"]=time();
            $insert_array["update_time"]=time();
            $file=\request()->file("file");
            if ($file){
                $imgPath="";
                //移动文件位置
                if ($file){
                    $info = $file->move(ROOT_PATH . 'public' . DS . 'upload' . DS . 'user' . DS . date('Y') . DS . date('m-d'),md5(microtime(true)));
                    if ($info) {
                        // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                        $imgPath = "/upload/user/" . date('Y') . '/' . date('m-d') . '/' . $info->getSaveName();
                    }
                }else{
                    return $this->error($file->getError());
                }
                //赋值
                $insert_array["user_logo"]=$imgPath;
                $result=Db::name("user")->insert($insert_array);
                if ($result){
                    exit(json_encode(array("status"=>1,"msg"=>"添加成功")));
                }else{
                    exit(json_encode(array("status"=>0,"msg"=>"添加失败")));
                }
            }else{
                echo "<script>alert('请添加图片')</script>";
            }
        }
        return $this->fetch("user-add");
    }


## 将base64编码的图片上传
在一些的开发中,可能会遇到将图片以base64编码的形式进行上传,
代码如下:

前端代码:
html:
 <input class="img-input" type="file" value="" id="test1" data-src="" onchange="basess(this)" />
 <img alt class="image" id="img1" src="" />
 
 js:
  //添加
    function add_sumbit() {
       
        var user_logo=$("#test1").attr("data-src");
        
        $.post(
            "{:url('admin/user/add')}",
            {user_logo:user_logo},
            function (data) {
                console.log(data);
                if(data.code==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function () {
                        parent.layer.closeAll();
                        parent.location.reload();
                    },1500);
                }else{
                    layer.msg(data.msg,{icon:2});
                }
            });
    }
    
    //(base64编码)
    function basess(t) {
        var file = t.files[0];
        // 读取文件:
        var reader = new FileReader();
        reader.onload = function(e) {
            console.log(e);
            var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
            $(t).parent().find('img').attr('src', data);
            $(t).attr('data-src', data);

        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    }
控制器代码:
        $user_logo=input("param.user_logo");
            if (is_image_base64($user_logo)) {
                $upload=new UploadController();
                $list["user_logo"]=$upload->upload_base64("user",$user_logo);  //调用图片上传的方法
            } else {
                $list["user_logo"] = $user_logo;
            }

方法说明:

    /*
 * 检查图片是不是bases64编码的
 */
function is_image_base64($base64) {
    /*if($base64==base64_encode(base64_decode($base64))){
        return true;
    }else{
        return false;
    }*/
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)){
        return true;
    }else{
        return false;
    }
}

upload控制器的方法;

    //图片上传为base64为的图片
    public function upload_base64($type,$img){
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $img, $result)){
            $type_img = $result[2];  //得到图片的后缀
            //上传 的文件目录

            $new_files = ROOT_PATH . 'public' . DS . 'upload'. DS . $type. DS . date('Y') . DS . date('m-d') . DS ;

            if(!file_exists($new_files)) {
                //检查是否有该文件夹,如果没有就创建,并给予最高权限
                //服务器给文件夹权限
                mkdir($new_files, 0777,true);
            }
            $new_files = $new_files.date("YmdHis").".{$type_img}";
            if (file_put_contents($new_files, base64_decode(str_replace($result[1], '', $img)))){
                //上传成功后  得到信息
                $filenames=str_replace('\\', '/', $new_files);
                $file_name=substr($filenames,strripos($filenames,"/upload"));
                return $file_name;
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zw621

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值