PHP上传图片到七牛云存储

来源:互联网 发布:java的jdk和jre 编辑:程序博客网 时间:2024/05/18 11:47
  • 创建七牛账号,创建空间,获得AccessKey/SecretKey;

  • 安装php-sdk

通过composer,这是推荐的方式,可以使用composer.json 声明依赖,或者运行下面的命令。SDK 包已经放到这里 qiniu/php-sdk运行:composer require qiniu/php-sdk 
  • 直接下载安装,SDK 没有依赖其他第三方库,但需要参照 composer的autoloader,增加一个自己的autoloader程序。

  • html

@extends('admin.admin')@section('content-header')    <h1>        素材管理        <small>上传商品图片</small>    </h1>    <ol class="breadcrumb">        <li><a href="{{url('/dashboard')}}"><i class="fa fa-dashboard"></i> 主页</a></li>        <li class="active"><a href="{{url('/admin/info/index')}}">素材管理 - 上传商品图片</a></li>    </ol>@stop@section('content')    <h2 class="page-header">上传商品</h2>    <form id="uploadForm" enctype='multipart/form-data'  >{{ csrf_field() }}        <div class="nav-tabs-custom">            <ul class="nav nav-tabs">                <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">主要内容</a></li>            </ul>            <div class="tab-content">                <div class="tab-pane active" id="tab_1">                    <div class="form-group">                        <label>商品标题                            <small class="text-red">*</small>                        </label>                        <input value="" required="required" type="text" class="form-control" name="good_title" autocomplete="off"                               maxlength="80">                    </div>                    <div class="form-group">                        <label>商品价格                            <small class="text-red">*</small>                        </label>                        <input value="" required="required" type="text" class="form-control" name="good_price" autocomplete="off"                               maxlength="80">                    </div>                    <div class="form-group">                        <label>上传商品缩略图片                            <small class="text-red">*</small>                        </label>                        <div class="form-group" >                            <div class="fileinput fileinput-new" data-provides="fileinput"  id="exampleInputUpload">                                <!-- <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">                                    <img id='picImg' style="width: 100%;height: auto;max-height: 140px;" src="{{url('images/picture/noimage.png')}}" alt="" />                                </div> -->                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>                                <div>                                    <span class="btn btn-primary btn-file">                                        <span class="fileinput-new">选择文件</span>                                        <span class="fileinput-exists">换一张</span>                                        <input type="file" name="file" id="picID" accept="image/gif,image/jpeg,image/x-png"/>                                    </span>                                    <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>                                </div>                            </div>                        </div>                    </div>                <button id="uploadSubmit" class="btn btn-info">提交</button>            </div>        </div>    </form>    <script type="text/javascript">            $('#uploadSubmit').click(function (ev) {                ev.preventDefault();                console.log(1111111);                var data = new FormData($('#uploadForm')[0]);                // data.append('img', $("#picID")[0].files[0]);                    console.log(data,1111111);                $.ajax({                    url: 'http://localhost/resource/post',                    type: 'POST',                    data: data,                                       async: false,                    cache: false,                    contentType: false,                    processData: false,                    success: function (data) {                        console.log(111111111);                    },                    error: function (data) {                        console.log(data.status);                    }                });                           });    </script>@stop

  • 用到了一个图片预览上传插件bootstrap-fileinput.js

下载预览地址http://www.jq22.com/jquery-info15397

  • php

<?phpnamespace App\Http\Controllers\Admin;use Illuminate\Http\Request;use App\Http\Controllers\Controller;use Qiniu\Auth;use Qiniu\Storage\UploadManager;use App\Models\Resource;class ResourceController extends Controller{    public function __construct(Resource $Resource)    {        $this->resource =  $Resource;    }    /**     *       */    public function getIndex()    {        return admin_view('resources.index');    }    /**     *       */    public function postGoodsInfo(Request $Request)    {        // dd($Request->good_price,$Request->good_title);        $file = $_FILES['file'];        $temp = explode("/", $file['type']); //获取文件名按“.”进行分割                $extension = end($temp);     // 获取文件后缀名        // 需要填写你的 Access Key 和 Secret Key        $accessKey = env('ACCESS_KEY');        $secretKey = env('SECRET_KEY');        // 构建鉴权对象        $auth = new Auth($accessKey, $secretKey);        // 要上传的空间        $bucket = 'qiniuimage';        // 生成上传 Token        $token = $auth->uploadToken($bucket );        // 要上传文件的本地路径        $filePath = $file['tmp_name'];        // 上传到七牛后保存的文件名        $key = time().rand(999,9999).".$extension";        // 初始化 UploadManager 对象并进行文件的上传        $uploadMgr = new UploadManager();        // 调用 UploadManager 的 putFile 方法进行文件的上传        list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);        if ($err !== null) {            var_dump($err,111);        } else {            var_dump($ret,22222);        }    }}
原创粉丝点击