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. CF888F Connecting Vertices

    首先可以发现的是,因为两条线段不能在除了端点处相交,因此整个多边形最终一定会被连接成最上方由若干条线段在端点处相交连成,每条线段下方又是一个子结构. 因此你会发现,每个合法的状态都能被分成两个合法的子 ...

  2. netty系列之:选byte还是选message?这是一个问题

    目录 简介 类型的定义 搭建UDT stream服务器 搭建UDT message服务器 Stream和Message的handler 总结 简介 UDT给了你两种选择,byte stream或者me ...

  3. XML 中如何输入回车换行

    XML 中如何输入回车换行? XML 特殊字符: 下面的字符在 [XML]中被定义为 空白(whitespace)字符: 空格 ( ) Tab ( ) 回车 ( ) 换行 ( ) XML 中如何输入回 ...

  4. Idea 如何不通过模板创建支持Maven的JavaWeb项目

    手动与模板创建的区别,请自行体会. 1. 点击创建项目 2. 不勾选骨架 3.填写项目名称以及该Maven项目坐标(groupid.artifactid.version). 在仓库中,以坐标确定项目. ...

  5. Mybatis foreach的用法

    本文援引:https://www.cnblogs.com/fnlingnzb-learner/p/10566452.html 在做mybatis的mapper.xml文件的时候,我们时常用到这样的情况 ...

  6. jsp中<%@ taglib prefix="s" uri="/struts-tags"%>标签意思

    @taglib表明引用标签.类似java中的import语句prefix="s" 引用的名称在页面可以使用,就像java中生成的一个对象名,以后调用的时候直接使用<s:xxx ...

  7. web虚拟主机、日志分割以及日志分析

    目录 一.构建虚拟web主机 1.1 概述 1.2 支持的虚拟主机类型 1.3 部署虚拟主机步骤 1.3.1 基于域名的虚拟主机 (1)为虚拟主机提供域名解析 (2)为虚拟主机准备网页文档 (3)添加 ...

  8. Centos7系统使用yum遇到的问题failure: repodata/repomd.xml from base: [Errno 256] No more mirrors to try.

    简单粗暴重新安装yum. 1.查看linux上所有的yum包 # rpm -qa|grep yum 2.逐个卸载,如 # rpm -e yum-plugin-fastestmirror-1.1.31- ...

  9. Git配置多个github账号免密登录

    在公司开发中,有时候会存在公司账户跟私人账户共存,并随时需要切换的情况,这种情况下git可以配置多个ssh-key,无缝切换账号. 假如有两个github账号,一个是私人github账号,一个是公司g ...

  10. Centos 7.6 使用 kubekey 部署 kubesphere v3.1.0

    文章目录 主要功能 硬件要求 Kubernetes版本要求 配置主机之间的免密 安装所需依赖 下载KubeKey 创建Kubernetes集群以及KubeSphere kk命令使用方式 修改配置文件 ...