Home / Questions / 157285
Accepted
Felipe
Asked: 2020-04-19 21:07:37 +0800 CST 2020-04-19 21:07:37 +0800 CST

如何使用 Axios 将图像从 VueJS 上传到 Laravel？

  • 772

我必须更改用户的个人资料图像，为此我使用 Vuejs，问题是它会将图像传递给我base64，当我在myProfile控制器的方法中进行解码时，它很简单，或者它将数字 1 保存在头像中表的字段user或只是传递它null。

个人资料.vue

<template>
   <input type="file" name="image" @change="getImage" accept="image/*">
   <img :src="avatar" class="img-circle" width="150" />
   <a href="" v-show="loaded" class="btn btn-success" @click.prevent="updateAvatar">Upload</a>

</template>
<script>
   props: ['auth'],
data() {
    return {
        user: {},
        errorss: {},
        showMe: false,
        loaded: false,
        avatar: '',
    }
},
mounted() {
    this.user = JSON.parse(this.auth);
    this.avatar = this.user.avatar;
},
   getImage(e){
        let image = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onload = e => {
            this.avatar = e.target.result;
        }
        this.loaded = true;
    }, 
    updateAvatar(){
        let urlAvatar = '/dashboard/avatar';
        //let value = new FormData();
        //value.append('image', this.avatar);
        const value = {
                'image': this.avatar
            }

        axios.put(urlAvatar, value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((e) => {
                console.log(e.response.data);
            })
    },
</script>

注意：当我占据一个FormData()化身时，它发生在我身上是空的

myProfile我已经对方法进行了很多更改，最后我把它留下来看看他们如何指导我。

我的个人资料（用户控制器）

public function myAvatar(Request $request)
{
    $file_data = $request->image;
    $avatar = Storage::putFile('public/defaults/users/avatar/', base64_decode($file_data));

    $userAvatarUpdate = User::find(Auth::user()->id);
    $userAvatarUpdate->avatar = $avatar;
    $userAvatarUpdate->update();

    return response()->json([
            'status' => 'Muy bien!',
            'msg' => 'Tu foto de perfil se actualizo.',
        ], 200);

}

我看过几个教程，但我还没有找到适合我需要的解决方案。

有任何想法吗？我正在使用Laravel 5.6,Vuejs 2和Axios.

laravel

1 Answers

  1. Best Answer

    axios要使用by 方法上传图片PUT，您可以“欺骗”并通过postfrom发送vue，但在 Laravel 中访问PUT. （可能有更好的方法，但仍有待调查:)）

    存储图像的第一个建议是继续使用，storage但我注意到它尝试直接存储在项目的公用文件夹中，这并不完全正确，但对于示例，我们将继续使用此配置。

    config\filesystems.php为此，在默认文件中，driver存储是local您必须更改root本地密钥的存储文件夹的值，使用public_path它将等于public项目文件夹，在此我们指定 Laravel 将有一个文件夹defaults

    'local' => [
   'driver' => 'local',
   'root' => public_path('defaults'), // miproyecto.com/public/defaults/
],

    在控制器中它可以停留。

    public function myAvatar(Request $request)
{
    // Verificamos si hay un file con nombre avatar
    if ($request->hasFile('avatar')) {
        // Si es así , almacenamos en la carpeta public/avatars
        // esta estará dentro de public/defaults/
       $url = $request->avatar->store('users/avatar');
        $userAvatarUpdate = User::find(auth()->id());
        /** Áctualización y 
         return JSON*/
    }
    return "Noo Llego una imagen";
}

    VueJs，（包括代码解释）

    <template>
    <div>
        <input type="file" name="image" @change="getImage" accept="image/*">
        <button @click="updateAvatar">Subir Imagen</button>
    </div>
</template>
<script>
    export default {

        data(){
            return {
                imagen : null,
            }
        },
        methods  : {
            getImage(event){
                //Asignamos la imagen a  nuestra data
                this.imagen = event.target.files[0];
            },
            updateAvatar(){
                //Creamos el formData
                var data = new  FormData();
                //Añadimos la imagen seleccionada
                data.append('avatar', this.imagen);
                //Añadimos el método PUT dentro del formData
                // Como lo hacíamos desde un formulario simple _(no ajax)_
                data.append('_method', 'PUT');
                //Enviamos la petición
                axios.post('/dashboard/avatar',data)
                .then(response => {

                })
            }
        }
    }
</script>

    要公开访问图像，您将拥有路径

    miproyecto.com/defaults/users/avatar/hashimage
    • 7