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. 「CTSC 2011」幸福路径

    [「CTSC 2011」幸福路径 蚂蚁是可以无限走下去的,但是题目对于精度是有限定的,只要满足精度就行了. \({(1-1e-6)}^{2^{25}}=2.6e-15\) 考虑使用倍增的思想. 定义\ ...

  2. 入门- k8s发布应用服务 （五）

    目标 了解 Kubernetes 的 Service(服务) 了解 Labels(标签)和 LabelSelector(标签选择器)与 Service(服务)的关系 在 kubernetes 集群中, ...

  3. JS特殊监听方法

    //监听元素变化classList //监听元素变化className //方法一 var tab2Interval = setInterval(function(){ if(!!($('#tab-2 ...

  4. webfunny前端系统：如何解决警报设置触发常见问题

    大家好,经常会有小伙伴在使用webfunny监控系统中,遇到无法触发警报的问题,其实都是一些配置上的疏漏,在这里给大家总结一下: PS:只要消息中心里有警报,则说明触发机制没有问题.其他方式没有触发, ...

  5. Java中eq、ne、ge、gt、le、lt的含义

    Java中eq.ne.ge.gt.le.lt 关系运算符包括EQ.NE.GE.GT.LE.LT几个,关系运算符返回的是真"True"或假"False". eq( ...

  6. ios真机弱网测试

    一.开启苹果手机开发者选项 首先你需要将iPhone和一台Mac电脑相连接,然后在Mac上打开Xcode开发工具,此时你iPhone的设置里就会出现"开发者"这个选项了. 二.进入 ...

  7. 1Appium Desktop 的简单应用

    由于Appium Desktop出来了,所以使用appium要比以前简单许多,现在根据以前的文章针对Appium Desktop做下修改更新 之前文章链接:https://testerhome.com ...

  8. Solution -「HDU 5498」Tree

    \(\mathcal{Description}\)   link.   给定一个 \(n\) 个结点 \(m\) 条边的无向图,\(q\) 次操作每次随机选出一条边.问 \(q\) 条边去重后构成生成 ...

  9. UVM宏

    1.注册宏 // 注册object类 `uvm_object_utils(类名) `uvm_object_parm_utils(类名) `uvm_object_utils_begin(类名) // 注 ...

  10. Zookeeper开源客户端Curator之创建会话

    前面Zookeeper的链接使用的都是其提供的原生代码,实际开发过程中非常底层的细节开发工作如连接重连,反复注册等耗费开发人员大量的工作精力并且重复工作.而开源客户端Curator的出现解决了该类问题 ...