Laravel框架中使用vue组件将用户头像上传到七牛云上面存储

Laravel框架中使用vue组件将用户头像上传到七牛云上面存储

PHP:7.2.2
Laravel:5.5.40
Vue:2.5

一、后台逻辑

1. 安装七牛驱动

$ composer require "overtrue/laravel-filesystem-qiniu" -vvv

2. 配置

a. 在app.php中插入七牛存储服务提供者

'providers' => [
  // Other service providers...
  Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,
],

b. 添加一个新的存储位置到config/filesystems.php
“`php

3. 路由routes/web.php

Route::get("avatar",'UsersController@avatar')->name('avatar');//用户头像
Route::post("avatar",'UsersController@changeAvatar')->name('avatar');//修改用户头像

4. 控制器app\Http\Controllers\UsersController.php

/**
 * 展示用户头像
 *
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function avatar()
{
    return view('users.avatar');
}

/**
 * 修改用户头像
 *
 * @param Request $request
 * @return array
 */
public function changeAvatar(Request $request)
{
    $file = $request->file('img');
    $filename = 'images/avatar' . 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];
}

二、前台编码

1. 写vue组件resources\assets\js\components\Avatar.vue

<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" style="width:80px;height:80px;">
        <div style="margin-top:20px;">
            <a class="ui button teal" @click="toggleShow">修改头像</a>
        </div>
    </div>
</template>

<script>
    import 'babel-polyfill'; // es6 shim
    import Vue from 'vue';
    import myUpload from 'vue-image-crop-upload/upload-2.vue';

    export default{
        props:['avatar'],
        mounted() {
            console.log(this.avatar);
        },
        data(){
            return{
                show: false,
                params: {
                    _token: Laravel.csrfToken,
                    name: 'img'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: this.avatar // the datebase64 url of created image
            }
        },
        components: {
            'my-upload': myUpload
        },

        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            /**
             * crop success
             *
             * [param] imgDataUrl
             * [param] field
             */
            cropSuccess(imgDataUrl, field){
                console.log('-------- crop success --------');
                this.imgDataUrl = imgDataUrl;
            },
            /**
             * upload success
             *
             * [param] jsonData  server api return data, already json encode
             * [param] field
             */
            cropUploadSuccess(response, field){
                this.imgDataUrl = response.url
                this.toggleShow()
            },
            /**
             * upload fail
             *
             * [param] status    server api return error status, like 500
             * [param] field
             */
            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    }
</script>

2. 插入app.js

...
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('user-avatar', require('./components/Avatar.vue'));

然后在使用gulp命令重新构建前台框架。

3. 写页面resources\views\users\avatar.blade.php

@extends('layouts.app')

@section('title','更换头像')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">更换头像</div>

                    <div class="panel-body">
                        <user-avatar avatar="{{user()->avatar}}"></user-avatar>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

效果