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. 为什么内部类调用的外部变量必须是final修饰的？

    感谢原文:https://blog.csdn.net/u010393325/article/details/80643636 因为生命周期的原因.方法中的局部变量,方法结束后这个变量就要释放掉,fin ...

  2. Swift字符串的介绍

    字符串的介绍 字符串在任何的开发中使用都是非常频繁的 OC和Swift中字符串的区别 在OC中字符串类型时NSString,在Swift中字符串类型是String OC中字符串@"" ...

  3. linux 进程信号

    转载请注明来源:https://www.cnblogs.com/hookjc/ signal 函数的使用方法简单,但并不属于 POSIX 标准,在各类 UNIX 平台上的实现不尽相同,因此其用途受 到 ...

  4. UIPickView的基本使用

    UIPickView和TableView一样,想要展示数据也要设置数据源和代理设置数据源self.pickView.dataSource = self;设置代理self.pickView.delega ...

  5. JS实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始 ...

  6. node.js中的fs.appendFile方法使用说明

    方法说明: 该方法以异步的方式将 data 插入到文件里,如果文件不存在会自动创建.data可以是任意字符串或者缓存. 语法: 代码如下: fs.appendFile(filename, data, ...

  7. Content-Type: multipart/form-data;文件上传利用

    当我们找到一个文件上传接口时,发现他的MIME类型检测为Content-Type: multipart/form-data;时,我们就可以尝试下面几种方法来绕过限制. ---------------- ...

  8. 到底什么是TORCH.NN？

    该教程是在notebook上运行的,而不是脚本,下载notebook文件. PyTorch提供了设计优雅的模块和类:torch.nn, torch.optim, Dataset, DataLoader ...

  9. selenium学习路线

      1.配置你的测试环境,针对你所学习语言,来配置你相应的selenium 测试环境.selenium 好比定义的语义---"问好",假如你使用的是中文,为了表术问好,你的写法是& ...

  10. 基于C6678+XC7V690T的6U VPX信号处理卡

    一.概述 本板卡基于标准6U VPX 架构,为通用高性能信号处理平台,系我公司自主研发.板卡采用一片TI DSP TMS320C6678和一片Xilinx公司Virtex 7系列的FPGA XC7V6 ...