質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

179閲覧

Laravel vue axiosで画像をDBに保存

issiyrun

総合スコア17

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/18 12:34

編集2022/01/12 10:55

画像をinputタグで選択したものをいったんLaravelのController側に送りたいのですが

message: "Call to a member function getClientOriginalName() on null"

が表示されます

requestないもデバッグで確認したのですが値が見つからないためそもそも送信の前段階の
値を確認したのですがやはり値が入っていませんでした。

定義の仕方が違いましたらご指摘いただきたいです。

ソースは以下です

js

1template> 2 3 <main> 4 5 <div class="profile"> 6 <h2 class="f-h2">アイデア投稿</h2> 7 8 <form method="post" class="profile-container"> 9 10 11 <div class="profile-container-input"> 12 13 14 15 <div class="profile-container-img"> 16 <div class="profile-container-img-left"> 17 <label class ="c-label" for="img">アイデアイメージ画像</label> 18 </div> 19 <div class="profile-container-img-right"> 20 <label> 21 <input id="img" @change ="onFileChange" v-bind="img" class ="c-input profile-container-img-none" type="file" /> 22 <i aria-hidden="true" v-show="!upLoadedImage" class="fas fa-plus fa-7x"></i> 23 <img :src="upLoadedImage" v-show="upLoadedImage" alt=""> 24 </label> 25 </div> 26 </div> 27 28 <div class="profile-container-input"> 29 <label class ="c-label" for="title">アイデア名</label> 30 <input id="title" name="title" v-model="title" class ="c-input" type="text" placeholder="(例)info@.com"> 31 </div> 32 33 <div class="profile-container-input"> 34 35 <label class ="c-label" for="category">カテゴリー</label> 36 <div class="c-radio-container"> 37 38 <input id="matching" v-model="category_id" name="category" type="radio" value=1> 39 <label for="matching" class="c-radio">マッチング</label> 40 41 <input id="board" v-model="category_id" name="category" class ="" type="radio" value=2> 42 <label for="board" class="c-radio">掲示板</label> 43 44 <input id="sns" v-model="category_id" name="category" class ="" type="radio" value=3> 45 <label for="sns" class="c-radio">SNS</label> 46 47 <input id="EC" v-model="category_id" name="category" class ="" type="radio" value=4> 48 <label for="EC" class="c-radio">ECサイト</label> 49 50 <input id="infoplaner" v-model="category_id" name="category" class ="" type="radio" value=5> 51 <label for="infoplaner" class="c-radio">情報発信</label> 52 53 <input id="other" v-model="category_id" name="category" class ="" type="radio" value=6> 54 <label for="other" class="c-radio">その他</label> 55 56 57 </div> 58 </div> 59 60 <div class="profile-container-input"> 61 <label class ="c-label" for="price">価格</label> 62 <input id="price" v-model="price" class ="c-input" type="text" placeholder="(例)1000"> 63 </div> 64 65 66 67 <div class="profile-container-input"> 68 <label class ="c-label" for="profile">概要</label> 69 <textarea name="" v-model="overflow" id="profile" class ="c-textarea" cols="30" rows="10" placeholder="自己紹介を記入してください"></textarea> 70 </div> 71 72 <div class="profile-container-input"> 73 <label class ="c-label" for="contents">内容</label> 74 <textarea name="" v-model="content" id="contents" class ="c-textarea" cols="30" rows="10" placeholder="あなたのアイデアをお待ちしてます"></textarea> 75 </div> 76 77 78 79 <div class="c-button"> 80<!-- v-on:click="confirmIdea(userId)"--> 81<!-- >--> 82 <router-link :to="{name:'postConfirm',params:{ 83 img: this.upLoadedImage, 84 title:this.title, 85 category_id:this.category_id, 86 price:this.price, 87 overflow:this.overflow, 88 content:this.content, 89 }}" >投稿確認</router-link> 90 </div> 91 </div> 92 </form> 93 </div> 94 95 </main> 96 97</template> 98 99<script> 100 import {mapState} from "vuex"; 101 102 export default { 103 name: "PostIdeaComponent", 104 105 data:function () { 106 return{ 107 img:'', 108 title:'', 109 category_id:'', 110 price:"", 111 overflow:'', 112 content:'', 113 upLoadedImage:"", 114 fileInfo:"" 115 } 116 117 }, 118 119 mounted() { 120 console.log('PostIdeaComponent mounted.'); 121 this.user = this.$store.dispatch('getUsers'); 122 }, 123 124 methods: { 125 confirm: function () { 126 this.$router.push({ name: 'postConfirm',params:{ 127 img: this.img, 128 title:this.title, 129 category_id:this.category_id, 130 overflow:this.overflow, 131 content:this.content, 132 price:this.price } 133 }) 134 }, 135 136 confirmIdea:function(userId){ 137 axios.post('/api/confirm',{ 138 img:this.img, 139 title:this.title, 140 category_id:this.category_id, 141 overflow:this.overflow, 142 content:this.content, 143 price:this.price, 144 user_id:userId, 145 }) 146 .then((response) =>{ 147 console.log(response); 148 //投稿した後は詳細に飛びたい 149 }).catch((error)=>{ 150 console.log(error); 151 }); 152 }, 153 154 155 156 157 onFileChange(event){ 158 this.fileInfo = event.target.files[0] 159 this.createImage(); 160 this.saveImage() 161 }, 162 163 createImage() { 164 //画像をプレビュー表示するロジック 165 let reader = new FileReader(); 166 reader.onload = (e) => { 167 this.upLoadedImage = e.target.result 168 }; 169 reader.readAsDataURL(this.fileInfo); 170 }, 171 //画像をDBに保存してパスを保存するロジック 172 173 saveImage(){ 174 175 const formData = new FormData() 176 console.log(this.fileInfo) 177 formData.append('file',this.fileInfo); 178 axios.post('/api/fileUpload',formData) 179 .then(response =>{ 180 console.log(response) 181 }).catch((error)=>{ 182 console.log(error) 183 }) 184 185 } 186 }, 187 computed:{ 188 userId(){ 189 return this.$store.state.users.id 190 } 191 }, 192

Controller側の処理です

php

1 public function imgUpload(Request $request) 2 { 3 4 5 $file_name = request()->file->getClientOriginalName(); 6 7 request()->file->storeAs('public/',$file_name); 8 9 $user = App\User::find($request->input('userId')); 10 11 $user->update(['img' =>'/storage/'.$file_name]); 12 13 return $user; 14 15 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

php

1request()->file->getClientOriginalName(); 23$request->file->getClientOriginalName();

ではないですか?

投稿2020/01/21 08:39

meshi_s

総合スコア276

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

issiyrun

2020/01/22 22:42

確認してみます。 ご回答ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問