laravel5.5+框架使用百度WebUploader文件上传组件上传图片至七牛云的流程步骤

Laravel  /  管理员 发布于 3年前   823

依赖包

itbdw/laravel-storage-qiniu
Web Uploader文件上传组件

laravel框架端代码：

composer安装第三方包

composer require itbdw/laravel-storage-qiniu 

注册服务

打开config文件夹下的app.php文件，在providers中加入一下代码

'providers' => [
...
itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class
],

设置存储驱动-七牛云

打开config文件夹下的filesystems.php文件，在disks中加入一下代码

'qiniu' => [  
            'driver'    => 'qiniu',  
            'domain'    => '',  //你的七牛域名  
            'access_key'=> '',    //AccessKey  
            'secret_key'=> '',   //SecretKey  
            'bucket'    => '',    //Bucket名字，即七牛云存储空间名称  
        ],

七牛云上传操作控制器里面进行上传

function file(Request $request){
        $disk = \Storage::disk('qiniu'); //使用七牛云上传
        $time = date('Y-m-d');
            //上传 这里的file是前端的name值，自己来定
        $filename = $disk->put($time, $request->file('file'));
        if(!$filename) {
            echo "上传失败";
        }
        
        $img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接
        return $img_url;
}

添加上传控制器路由

Route::post('file',[\App\Http\Controllers\ArtController::class,'file']);

ps:

删除图片报错问题解决方案

1.打开项目根目录的

/vendor/qiniu/php-sdk/src/Qiniu/Storage/BucketManager.php

里面的删除指定资源方法修改 代码如下：

//原来的
public function delete($bucket, $key)
{
   $path = '/delete/' . \Qiniu\entry($bucket, $key);
   return $this->rsPost($path);
}

//修改后
public function delete($bucket, $key)
{
   $path = '/delete/' . \Qiniu\entry($bucket, $key);
   list(,$error) = $this->rsPost($path);
   return $error;
}

前端代码：

webuploader下载链接:

http://fex.baidu.com/webuploader/download.html

视图页面，放以下代码:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/webuploader-master/css/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="/webuploader-master/dist/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="/webuploader-master/examples/image-upload/style.css" />
<script type="text/javascript" src="/webuploader-master/examples/image-upload/jquery.js"></script>
<script type="text/javascript" src="/webuploader-master/examples/image-upload/upload.js"></script>

<div id="wrapper">
    <div id="container">
        <!--头部，相册选择和格式选择-->
        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    {{--自定义属性ids，存放token值--}}
                    {{--因为laravel框架有跨站请求伪造的考虑，请求要检测token--}}
                    <div id="filePicker2"></div><div class="uploadBtn" id="start" ids="{{csrf_token()}}">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>

web uploader上传路由设置  在upload.js 140 行左右

只需要将 server 改成你的目标路由（上面控制器的file路由）

前端设置 如下代码：

let token = $('#start').attr('ids');
//实例化
uploader = WebUploader.create({
    pick: {
        id:'#filePicker',
        label:'点击选择图片'
    },
    formDate: {
        uid: 1,
        _token:token
    },
    ...
    server:"file",
    ...
})