1:composer安装：

composer require qiniu/php-sdk

2：

配置使用：

在tp5.1的配置文件app.php中配置七牛云的参数

    'qiniu' => [

        'accesskey' => '你的accesskey',

        'secretkey' => '你的secretkey',

        'bucket'    => '存储空间',

        'domain'    =>  '域名'

    ],

3: 前端

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> webuploader上传</title>

<!--    引入webuploader上传-->

    <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css">

</head>

<body>

<div id="uploader" class="wu-example">

    <!--用来存放文件信息-->

    <div id="thelist" class="uploader-list"></div>

    <div class="btns">

        <div id="picker">选择文件</div>

        <button id="ctlBtn" class="btn btn-default">开始上传</button>

    </div>

    <div class="formControls col-xs-4 col-sm-4">

        <input type="hidden" value="/static/img/2.jpeg" name="icon" id="icon"/>

        <img src="/static/img/2.jpeg" id="pic" name="icon" style="width: 50px;">

        <button onclick="delimg()">删除图片</button>

    </div>

</div>

<!--</form>-->

</body>

</html>

<!--    jq-->

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!--    引入webuploader上传-->

<script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>
    /*文件上传*/

    var uploader = WebUploader.create({

        auto: true,

        chunked: true, //是否要分片处理大文件上传

        chunkSize: 2 * 1024 * 1024, //分片上传，每片2M

        fileSizeLimit: 2 * 1024 * 1024 * 1024,    // 所有文件总大小限制

        fileSingleSizeLimit: 2 * 1024 * 1024 * 1024,    // 单个文件大小限制

        swf: '/webuploader/Uploader.swf',//文件接收服务端。

        server: '/img/upfile',//文件接收服务端。

        compress: {

            // 图片质量，只有type为`image/jpeg`的时候才有效。

            quality: 90,

        },

        pick: {

            id: '#picker',

            // 是否开启选择多个文件的能力

            multiple: false

        },

        accept: { //指定接受哪些类型的文件

            title: 'Images',

            extensions: 'gif,jpg,jpeg,bmp,png',

            mimeTypes: 'image/*'

        }

    });

  uploader;

    //当文件被加入队列以后触发

    uploader.on('fileQueued',function(file){

        var $li = $(

                '<div id="' + file.id + '" class="file-item thumbnail" onclick="delUpload(this,'+i+','+num+');">' +

                '<input type="hidden" name="img[]" id="'+file.id+'id" />'+

                '<img>' +

                '<div class="info">开始上传图片...</div>' +

                '</div>'

            ),

            $img = $li.find('img');

        $("#fileList"+i).append($li);//图片添加到容器

        var sum = $("#fileList"+i).find('.file-item').length;

        if(sum >= num){

            $("#filePicker"+i).attr('style','display:none;');

        }

        // 创建缩略图显示

        uploader.makeThumb(file,function(error,src){

            if (error){

                $img.replaceWith('<span>不能预览</span>');

                return;

            }

            $img.attr('src',src);

        },200,200);

    });

    // 文件上传过程中创建进度百分比实时显示。

    uploader.on('uploadProgress',function(file,percentage){

        $("#"+file.id+" .info").html('正在上传（'+parseInt(percentage*100)+'%）');

    });

    //文件上传返回成功，判断是否成功上传到七牛

    uploader.on('uploadSuccess', function(file,response){

        if(response.code == 0){

            $("#"+file.id+" .info").html('上传失败');

        }else{

            sumimg(num);

            $("#"+file.id+" .info").html('上传完成,点击图片可删除');

            $( '#'+file.id ).addClass('upload-state-done');

            $( '#'+file.id+"id").val(response.data);//赋值到input

        }

    });

后端路由：

Route::get('img/create','img/img/create');

Route::post('img/upfile','img/img/upfile');

调用七牛

use Qiniu\Auth;

use Qiniu\Config;

use Qiniu\Storage\BucketManager;

use Qiniu\Storage\UploadManager;

控制器：

<?php

namespace app\img\controller;

use Qiniu\Auth;

use Qiniu\Storage\UploadManager;

use think\Controller;

use think\Request;

class Img extends Controller

{

    /**

     * 显示创建资源表单页.

     *

     * @return \think\Response

     */

    public function create()

    {

        //

        return  view('img/create');

    }

    /**

     * 保存新建的资源

     *

     * @param  \think\Request  $request

     * @return \think\Response

     */

    public function upfile(Request $request) {

        // 初始化签权对象

        $accesskey=config('qiniu.accesskey');

        $secretkey=config('qiniu.secretkey');

        $bucket=config('qiniu.bucket');

        $domain=config('qiniu.domain');

        $auth = new Auth($accesskey,$secretkey);

        $token = $auth->uploadToken($bucket);

        // 构建 UploadManager 对象

        $uploadMrg = new UploadManager();

        // 上传文件到七牛

        $files = $_FILES;

        $values = array_values($files);

        $saveName = hash_file('sha1', $values[0]['tmp_name']) . time();

        $this->assign('saveName',$saveName);

        list($ret, $err) = $uploadMrg->putFile($token, $saveName, $values[0]['tmp_name']);

        if ($err !== null) {

            return  getJsonData('500','上传图片失败','');

        } else {

              $data= 'http://' . $domain. '/' . $ret['key'];

            return  getJsonData('200','上传成功',$data);

        }

    }

    public function delete($id)

    {

        //

    }

}

参考博客：

https://www.cnblogs.com/BearLee/p/10685018.html#4383580

tp5 webupload文件上传至七牛云的更多相关文章

  1. .Net Core实现将文件上传到七牛云存储

    功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qini ...

  2. laravel7文件上传至七牛云并保存在本地图片

    HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...

  3. 微信小程序文件上传至七牛云（laravel7）

    1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...

  4. Tp3.1 文件上传到七牛云

    TP3.1 中不支持Composer 就无法用composer 安装 下载历史的SDK https://github.com/qiniu/php-sdk/releases/tag/v7.0.8 下载下 ...

  5. Java进阶学习：将文件上传到七牛云中

    Java进阶学习:将文件上传到七牛云中 通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...

  6. 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  7. 阿里云CentOS自动备份MySql 8.0并上传至七牛云

    本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...

  8. Spring MVC 之文件上传（七）

    SpringMVC同样使用了apache的文件上传组件.所以需要引入以下包: apache-commons-fileupload.jar apache-commons-io.jar 在springAn ...

  9. django + ckeditor + 七牛云，图片上传到七牛云

    传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.

随机推荐

  1. Java 中的锁原理、锁优化、CAS、AQS 详解！(转)

    1.为什么要用锁? 锁-是为了解决并发操作引起的脏读.数据不一致的问题. 2.锁实现的基本原理 2.1.volatile Java编程语言允许线程访问共享变量, 为了确保共享变量能被准确和一致地更新, ...

  2. 入门-k8s部署应用 （三）

    Kubernetes 部署应用 在 k8s 上进行部署前,首先需要了解一个基本概念 Deployment Deployment 译名为 部署.在k8s中,通过发布 Deployment,可以创建应用程 ...

  3. 1、interface/implements 接口与引用

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.类中全部为抽象方法 2.抽象方法前不用加abstract 3.接口抽象方法属性为public 4.成员属性必须为常量 ...

  4. Ajax不允许缓存方法

    AJAX请求后台时会自动缓存,客户端发起请求首先请求缓存,第一次请求即由缓存再请求服务器,返回数据时同样先返回到缓存再展示再客户端.但是如果数据要求随时性呢,数据变化频率高呢?那么如何不让ajax设置 ...

  5. TCP连接的状态转换图深度剖析

    转载请注明来源:https://www.cnblogs.com/hookjc/ 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,如图1所示. (1)第一次握手:建立连接时 ...

  6. Charles抓包工具介绍

    1.Charles是什么? Charles是一款基于http协议的代理服务器,通过称为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的. 2.Charles有哪些用途? (1)能够分析前 ...

  7. linux c 线程相关函数

    线程相关函数(1)-pthread_create(), pthread_join(), pthread_exit(), pthread_cancel() 创建取消线程 一. pthread_creat ...

  8. python基础语法_9-1闭包 装饰器补充

    1.闭包的概念 closure:内部函数中对enclosing作用域的变量进行引用,外部函数返回内部函数名   2.函数实质与属性 函数是一个对象:在内存中有一个存储空间 函数执行完成后内部变量回收: ...

  9. PHP面试我有话要说

    你好,是我琉忆--PHP程序员面试笔试系列图书的作者. 随着越来越多的人开始迈入PHP开发工程师的队列,不管是一个PHP新手还是一个有一两年开发经验的PHPer都不得不去面对找工作前面试这件事. 我现 ...

  10. 3、Linux基础--cp、mv、rm、alias、vi/vim命令

    笔记 1.考试 1.判断网络是否通畅的命令 ping 2.定义系统提示组成的变量 PS1 3.Linux中目录从什么开始 根(/) 4.系统中目录路径类型有哪些,解释一下 绝对路径:以根目录作为参照物 ...