《Laravel 实战开发知乎》第42节《上传头像组件》 的问题

《Laravel 实战开发知乎》第42节《上传头像组件》 的问题:

使用vue-image-crop-upload这个package的时候,运行npm install vue-image-crop-upload命令安装这个包后,需要在resources\assets\js\bootstrap.js中引入这个包吗?

看视频中没有这一步操作,照着视频的步骤view中显示不出写的组件来。

写demo的步骤:我用的laravel 5.4

1、创建项目

composer create-project laravel/laravel laravel-5-4-demo

2、安装需要的包

npm install
npm install vue-image-crop-upload
npm install babel-polyfill

3、需要先运行的命令

php artisan make:auth

4、新建路由

Route::get('/avatar', 'UsersController@avatar');

5、新建控制器UsersController

php artisan make:controller UsersController

6、写控制器方法

    public function avatar()
    {
        return view('users.avatar');
    }

7、新建视图views/users/avatar.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <user-avatar></user-avatar>
    </div>
@endsection

8、新建vue组件Avatar.vue

<template>
    <div class="text-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="80px">
        <div style="margin-top: 20px">
            <a class="btn btn-primary" @click="toggleShow">修改头像</a>
        </div>
    </div>
</template>

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

    export default {
        props:['avatar'],
        data(){
            return {
                show: true,
                params: {
                    _token: Laravel.csrfToken,
                    name: 'img'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: this.avatar
            }
        },
        components: {
            'my-upload': myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },

            cropSuccess(imgDataUrl, field){
                this.imgDataUrl = imgDataUrl;
            },

            cropUploadSuccess(response, field){
                this.imgDataUrl=response.url;
                this.toggleShow();
            },

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

9、在app.js中注册组件

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

10、webpack.mix.js保持不变

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

11、用npm run dev命令编译文件。

问题:
组件不能显示,在chrome控制台中是这样显示的:

<user-avatar></user-avatar>

重试了一遍,可以了,此问题已关闭。

JellyBool
修改的评论也不能少于六个字哦!
canihelpyou 回复 JellyBool
修改的评论也不能少于六个字哦!
JellyBool 回复 canihelpyou
修改的评论也不能少于六个字哦!
canihelpyou 回复 JellyBool
修改的评论也不能少于六个字哦!
JellyBool 回复 canihelpyou
修改的评论也不能少于六个字哦!
canihelpyou 回复 JellyBool
修改的评论也不能少于六个字哦!
JellyBool 回复 canihelpyou
修改的评论也不能少于六个字哦!
canihelpyou 回复 JellyBool
修改的评论也不能少于六个字哦!
canihelpyou 回复 JellyBool
修改的评论也不能少于六个字哦!