vue头像上传组件上传头像到七牛云

vue头像上传组件上传头像到七牛云

1.安装vue组件vue-image-crop-upload

2.安装babel-polyfill

$ npm install babel-polyfill

3.复制demo代码到Avatar.vue组件

Laravel中vue组件位置是在resources/assets/js/components

<template>
    <div>
        <my-upload field="img"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :width="300"
                   :height="300"
                   :url="url"
                   :params="params"
                   :headers="headers"
                   img-format="png"></my-upload>
        <img :src="imgDataUrl" style="width: 200px;border-radius: 50%;">
        <a class="btn" @click="toggleShow">修改头像</a>
    </div>
</template>
<style>

</style>
<script>
    import 'babel-polyfill'; // es6 shim
    import myUpload from 'vue-image-crop-upload';
    export default {
        props:['avatar','url'],
        data() {
            return {
                show: false,
                params: {
                    _token: Laravel.csrfToken,
                    name: 'img'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: this.avatar,
                url:this.url
            }
        },
        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   服务器返回数据,已进行json转码
             * [param] field
             */
            cropUploadSuccess(response, field){
                console.log('-------- upload success --------');
                console.log(response);
                this.show = false
                console.log('field: ' + field);
            },
            /**
             * 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>

4.解释csrfToken的传值

在组件的参数中我用了 _token: Laravel.csrfToken, 来传递post提交方式的必须得csrfToken值,为什么能这用呢?因为我在app.blade模板中写了全局变量

<script>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        // 设置全局csrfToken值
        window.Laravel = <?php echo json_encode([
              'csrfToken' => csrf_token()
        ]); ?>;
</script>

5.模板中调用组件

这里的历史头像和上传头像的url,我都是绑定参数传递过去的

<user-avatar avatar="{{getAvatar($user->avatar)}}"
                     url="{{route('uploads.user.avatar',hashIdEnCode(auth()->id(),'user'))}}">
</user-avatar>

6.头像上传到七牛,使用超神的laravel-filesystem-qiniu

我使用的是先把图片传到本地(这样我就可以对图片进行二次加工),然后后台再上传图片到七牛
现在都不知道用file_get_contents到底好不好

$disk = Storage::disk('qiniu_overtrue');
// 获取到上传到本地的图片,再上传到七牛
$qiNiuUrl = $disk->put('avatar/'.$image['newName'], file_get_contents($savePath.$image['newName']));

6.当然这里面还有些附加操作要做的

1.更换头像的时候,需要删除本地(原图和缩率图)和七牛的头像
2.当头像是社会化登录获取的第三方资源的时候,不需要删除
3.......