使用七牛PHP-SDK上传文件

  1. 在七牛控制台中创建Bucket。

  2. 下载PHP-SDK包。

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

  3. 获取密钥信息: AccessKey、SecretKey。

  4. 项目中将文件直接传至七牛服务器、通过回调来返回需要的数据、减轻业务服务器压力。

    具体逻辑:

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

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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 模板

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

前端upload组件(iviewui)bill.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

回调:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  /**
* 持久化媒体文件
* @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. 上传资源完成之后可以通过异步数据处理将图片裁剪、添加水印。也是在上传策略中配置。详见