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. 布客&#183;ApacheCN 编程/后端/大数据/人工智能学习资源 2020.6

    公告 我们的群共享文件有备份到 IPFS 的计划,具体时间待定. 我们的机器学习群(915394271)正式改名为财务提升群,望悉知. 请关注我们的公众号"ApacheCN",回复 ...

  2. 取消a标签的默认行动（跳转到href）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. linux上printf出带颜色字体

    转载请注明来源:https://www.cnblogs.com/hookjc/ 统一定义: #define NONE         "\033[m"  #define RED   ...

  4. Shell之awk

    Shell之awk 目录 Shell之awk 一.awk概述 1. awk的工作原理 2. 命令格式 3. awk常见的内建变量(可直接用) 二.操作实例 1. 按行输出文本 2. 按字段输出文本 3 ...

  5. 一个实用批处理指令制作过程分享:Perforce更新完后打开VisualStudio再编译

    需求来源 笔者从事Unreal游戏客户端工作,使用VisualStudio开发,然后经常干一个事:就是使用Perforce(或svn)拉取最新代码,(一些时间后)拉取完之后然后打开 项目.sln,即V ...

  6. fiddler模拟2

    在解决日常的支持需求中,经常会遇到一些用户反馈一些无法简单复现的bug,有很大一部分的bug是由于用户自身的网络环境波动,或者是本身网络环境就较为恶劣,而服务在面对这种恶劣的网络环境的健壮性不够,导致 ...

  7. 最全Java架构师130面试题：微服务、高并发、大数据、缓存等中间件

    一.数据结构与算法基础 · 说一下几种常见的排序算法和分别的复杂度. · 用Java写一个冒泡排序算法 · 描述一下链式存储结构. · 如何遍历一棵二叉树? · 倒排一个LinkedList. · 用 ...

  8. 磁盘管理+三剑客之awk

    目录 磁盘管理+三剑客之awk 一.磁盘管理 二.格式化命令awk 1.awk的语法 2.参数 3.awk的生命周期 4.awk中的预定义变量 5.awk处理规则的执行流程 6.awk中的函数 7.a ...

  9. Solution Set - 神奇 NOIP 模拟赛

    \[\mathfrak{\text{Defining }\LaTeX\text{ macros...}}\newcommand{\vct}[1]{\boldsymbol{#1}}\newcommand ...

  10. VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手

    1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...