tp5 webupload文件上传至七牛云

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

 

 

复制代码
posted @   王越666  阅读(266)  评论(0)  编辑  收藏  举报
相关博文：
·  TP5实现多文件上传及展示
·  laravel7 实现阿里云大文件上传
·  前端图片上传七牛云
·  七牛云的使用
·  七牛云上传图片
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae