Загрузка изображения в vuejs плюс vuex плюс laravel - PullRequest
0 голосов
/ 18 апреля 2020

Я пытался загрузить изображение в laravel проекте, используя vuejs и vuex, но не смог. Ниже компонент

    <div class="form-group">
       <label class="col-sm-2 control-label">Profile Image</label>
       <div class="col-sm-10">
       <button class="btn btn-primary" @click="chooseFile()">Choose Image</button>
       <input type="file" class="form-control" ref="fileInput"v-on:change="uploadImage($event)" style="display:none" name="image">
       </div>
    </div>
<div class="form-group">
                                        <div class="col-sm-10">
                                            <img :src="this.imageUrl" height="150">
                                        </div>
                                    </div>
    <script>
        export default {
            name: "profile.vue",
            data(){
                return{
                    previewImage:null,
                    image:null,
                    imageUrl:''
                }
            },
            methods:{

                updateProfile(){
                  const image={
                      image:this.image
                  }
                    this.$store.dispatch('updateProfile',{image});
                },
                uploadImage(event){
                    const file=event.target.files[0];
                    console.log(file);
                    const fileReader=new FileReader();
                    fileReader.addEventListener('load',()=>{
                        this.imageUrl=fileReader.result
                    });
                    fileReader.readAsDataURL(file);
                    this.image=file;
                },
                chooseFile(){
                    this.$refs.fileInput.click()
                }
            }
        }
    </script>

ниже - действие. js из магазина

export const updateProfile=({commit,state},payload)=>{
    const currentUser=state.signIn.currentuser.data;
    const userImage=payload.image;
  axios.post(`/update-profile`,{currentUser,userImage}).then(response=>{
      // state.signIn.currentuser=response.auth;
      const msg=response.data.msg;
      commit('success',{msg});
  }).catch((e)=>{
      const error=e.response.data;
      commit('failed',{error});
    });
};

в хранилище, так как я передал два параметра, то есть currentUser, userImage, но я получил пустой userImage в контроллере. Если есть другой способ загрузить изображение, пожалуйста, прокомментируйте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...