PHP上传图片到七牛云存储

• 创建七牛账号，创建空间，获得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

<?php
namespace 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);
        }
    }
}