Laravel技巧集锦（40）：使用vue-image-crop-upload上传头像到服务器或者七牛云

需要用到的插件

vue-image-crop-upload ​​https://github.com/dai-siki/vue-image-crop-upload​​

laravel-filesystem-qiniu ​​https://github.com/overtrue/laravel-filesystem-qiniu​​

上传到七牛云

1、安装vue-image-crop-upload和babel-polyfill(依赖)

cnpm install babel-polyfill  -save
cnpm install vue-image-crop-upload  --save

2、vue文件，在app.js中注册和view引用

<template>
    <div style="text-align: center">

        <my-upload field="img"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :width="300"
                   :height="300"
                   url="/avatar"
                   :params="params"
                   :headers="headers"
                   img-format="png"></my-upload>
        <img :src="imgDataUrl" width="80">
        <div style="margin-top: 20px;">
            <button class="btn btn-default" @click="toggleShow">修改头像</button>
        </div>
    </div>
</template>

<script>
    import 'babel-polyfill'; // es6 shim

    import myUpload from  'vue-image-crop-upload/upload-2.vue';
    export default {
        props:['avatar'],
        data() {

            return {
                show: false,
                params: {
                    _token: Laravel.csrfToken,
                    name: 'img'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: this.avatar
            }

        },
        components: {
            'my-upload': myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
           
            cropSuccess(imgDataUrl, field){
                console.log('-------- crop success --------');
                this.imgDataUrl = imgDataUrl;
            },


            cropUploadSuccess(response, field){
                console.log('-------- upload success --------');
                this.imgDataUrl = response.url;
                console.log(response);
                this.toggleShow();
                console.log('field: ' + field);
            },

            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    }
</script>

3、route

Route::post('/avatar','UsersController@changeAvatar'); //存储文件

4、控制器（上传到服务器）

$file = $request->file('img');
$filename = md5(time().user()->id).'.'.$file->getClientOriginalExtension();
$file->move(public_path('avatars'),$filename);
user()->avatar = 'avatars/'.$filename;  //public/avatars目录
user()->save();
return ['url'=>user()->avatar];

上传到七牛云

1、2、3同上

4、安装laravel-filesystem-qiniu

composer require laravel-filesystem-qiniu

5、config\app.php注册

\Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,

6、env配置

QINIU_ACCESS_KEY= ****
QINIU_SECRET_KEY= ****
QINIU_BUCKET= ****
QINIU_DOMAIN= ****

7、设置文件流config\filesystems.php

<?php

//外部使用方法: config('filesystems.disks.qiniu.domain')
return [

    'disks' => [
        'qiniu' => [
            'driver'     => 'qiniu',
            'access_key' => env('QINIU_ACCESS_KEY', ''),
            'secret_key' => env('QINIU_SECRET_KEY', ''),
            'bucket'     => env('QINIU_BUCKET', ''),
            'domain'     => env('QINIU_DOMAIN', ''), // or host: https://xxxx.clouddn.com
        ],

    ],

];

8、控制器

 $file = $request->file('img');
        $filename = 'avatars/'.md5(time().user()->id).'.'.$file->getClientOriginalExtension();
       Storage::disk('qiniu')->writeStream($filename,fopen($file->getRealPath(),'r'));
        user()->avatar = 'http://'.config('filesystems.disks.qiniu.domain').'/'.$filename;
        user()->save();
        return ['url'=>user()->avatar];

注意：更多操作：详见​​https://github.com/overtrue/laravel-filesystem-qiniu​​

$disk = Storage::disk('qiniu');

// create a file
$disk->put('avatars/filename.jpg', $fileContents);

// check if a file exists
$exists = $disk->has('file.jpg');

// get timestamp
$time = $disk->lastModified('file1.jpg');
$time = $disk->getTimestamp('file1.jpg');

// copy a file
$disk->copy('old/file1.jpg', 'new/file1.jpg');

// move a file
$disk->move('old/file1.jpg', 'new/file1.jpg');

// get file contents
$contents = $disk->read('folder/my_file.txt');

// fetch url content
$file = $disk->fetch('folder/save_as.txt', $fromUrl);

// get file url
$url = $disk->getUrl('folder/my_file.txt');

// get file upload token
$token = $disk->getUploadToken('folder/my_file.txt');
$token = $disk->getUploadToken('folder/my_file.txt', 3600);

// get private url
$url = $disk->privateDownloadUrl('folder/my_file.txt');