1. 在七牛控制台中创建Bucket。
  2. 下载PHP-SDK包。

可以通过composer来安装 composer require qiniu/php-sdk

  1. 获取密钥信息: AccessKey、SecretKey。
  2. 项目中将文件直接传至七牛服务器、通过回调来返回需要的数据、减轻业务服务器压力。

具体逻辑:

-  客户端获取服务器颁发的上传凭证(token)。
-  客户端上传资源至七牛,并带上token作为请求内容的一部分。
-  七牛处理资源、带上参数访问回调地址。
-  回调接口处理数据返回七牛。
-  七牛返回回调接口的处理数据给客户端。

demo:

//laravel中获取上传token
public function qiniu_token ()
    {
        //用户ID加密处理.
        $uid    = $this->hashid_enconde(Auth::user()->id);
        $bucket = env('QINIU_BUCKET');
        $policy = [
            'x:uid'            => $uid,
            //回调域名
            //Laravel中回调地址尽量走api路由、走web路由post过来的数据会因为csrf验证而导致419错误
            'callbackUrl'      => env('QINIU_CALLBACK'),
            //回调中需要传给服务器的数据、其中有七牛的魔法参数、和自定义的参数
            'callbackBody'     => '{"fname":"$(fname)", "fkey":"$(key)", "mimeType":"$(mimeType)","fsize":"$(fsize)", "uid":"'.
                                  $uid.'"}',
            'callbackBodyType' => 'application/json',
            //自定义文件存储路径(七牛中就是一串字符串...)
            'saveKey'          => "tools/".$uid."/$(year)/$(mon)/$(etag)$(ext)",
        ];
        $auth = new \Qiniu\Auth();
        
        return $auth->uploadToken($bucket, null, 3600, $policy);
    }

回调策略详见 文档

Blade 模板

@extends('layouts.app')
@section('content')
    <div class="container">
        <bill :upload-token="{{$token}}"></bill>
    </div>
@endsection

前端upload组件(iviewui)bill.vue

<template>
    <div>
         <Upload
                  ref="upload"
                  multiple
                  :data="uploadToken"
                  :default-file-list="uploadList"
                  :on-success="handleUploadSuccess"
                  :format="['jpg','jpeg','png']"
                  <!-- 此处填写七牛服务器地址 -->
                  action="https://upload.qiniup.com">
            <Button icon="ios-cloud-upload-outline">图片上传</Button>
          </Upload>
        <input v-model="images_url"></input>
    </div>
</template>

<script>
    export default{
        props:{
            uploadToken: Object
        },
        data(){
            return{
                uploadList:[],
                images_url:[],
            }
        },
        methods:{
            handleUploadSuccess(){
                this.$Message.success('图片上传成功');
                this.images_url.push(res.data);
            }
        }
    }
</script>

回调:

    /**
     * 持久化媒体文件
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function qiniuCallback (Request $request)
    {
        //将文件信息存入数据库中
        $media = Media::create([
            'user_id'     => $this->hashid_decode($request->get('uid')),
            'name'        => $request->get('fname'),
            'key'         => $request->get('fkey'),
            'mimeType'    => $request->get('mimeType'),
            'size'        => $request->get('fsize'),
            'description' => $request->get('des'),
        ]);
        //$media->url 使用Eloquent模型访问器功能生成图片路径,回调返回参数可自定义
        return $this->successResponseData(200, $media->url);
    }
  1. 上传资源完成之后可以通过异步数据处理将图片裁剪、添加水印。也是在上传策略中配置。详见

标签: Technology

添加新评论