vuejsからLaravelのサーバーに画像をアップロードすることができなくて困っている。

画像をアップロードすることができなくて困っております。
タイトルやタグ、内容はアップロードできることを確認できたのですが、画像のファイルのみ[Object file]と表示されてしまいます。様々なサイトを拝見し、試しましたが解決することができませんでした。
以下のファイルにて画像をアップロードしております。

vue
1<template>
2  <link rel="stylesheet" href="/css/blogCreate/blogCreate.css">
3  <div class="main__inner">
4    <section class="blogCreate__sec">
5      <form class="blogCreate__wapper">
6        <label class="unique contact__form__label">タイトル</label>
7        <input v-model="data.title" class="unique contact__form" type="text">
8        <label class="unique contact__form__label">タグ</label>
9        <input v-model="data.tags" class="unique contact__form" type="text">
10        <label class="unique contact__form__label">内容</label>
11        <textarea @keydown.tab.prevent="pushTab" v-model="data.selfLangTxt" class="unique contact__form" name="message" style="white-space:pre-wrap; tab-size: 4;"></textarea>
12        <label class="unique contact__form__label">リアルタイムコンパイラー</label>
13        <div class="preview__wapper">
14          <div class="preview" v-html="realTimeCompileSystem">
15          </div>
16        </div>
17        <div class="unique selectFile__wapper__flex">
18          <label class="unique contact__form__label" style="width: 150px; margin: 0; line-height: 54px;">メインヴィジュアル:</label>
19          <input @change.prevent="getMVFile" class="unique contact__form" type="file" style="margin: 0;">
20        </div>
21        <template v-for="num of data.addSelectFileBtnNum" :key="num">
22          <div class="unique selectFile__wapper__flex" :id="num - 1">
23            <label class="unique contact__form__label" style="width: 150px; margin: 0; line-height: 54px;">画像を追加:</label>
24            <input @change.prevent="getImageFile" class="unique contact__form" type="file" style="margin: 0;">
25            <i @click="moveToTrash" class="far fa-trash-alt fa-2x" style="color: red; width: 50px; line-height: 58px;"></i>
26          </div>
27        </template>
28        <input @click="data.addSelectFileBtnNum++" class="unique contact__form" type="button" value="画像を追加">
29        <input @click="blogCreate" class="unique contact__form" type="button" style="margin-top: 50px;" value="ブログ作成">
30      </form>
31    </section>
32  </div>
33</template>
34
35<script>
36  import { reactive, computed } from 'vue'
37  import { store } from '../store.js'
38  //import { router } from '../router'
39  import axios from 'axios'
40
41  export default {
42    name: 'BlogCreate',
43    setup() {
44      const data = reactive({
45        title: '',
46        tags: '',
47        selfLangTxt: '',
48        addSelectFileBtnNum: 0,
49        imageMV: null,
50        images: [],
51      })
52      const pushTab = (e) => {
53        var elem, end, start, value
54        elem = e.target
55        start = elem.selectionStart
56        end = elem.selectionEnd
57        value = elem.value
58        elem.value = "" + (value.substring(0, start)) + "\t" + (value.substring(end))
59        elem.selectionStart = elem.selectionEnd = start + 1
60      }
61      const realTimeCompileSystem = computed(() => {
62        //ブログ内容にbrタグが入らないようにselfLangTxtAfterに改行をbrに置き換え後、定義・代入した
63        let selfLangTxtAfter = data.selfLangTxt.replace(/\r\n|\r|\n/g, '<br>')
64        for (let i = 0; i < 30; i++) {
65          selfLangTxtAfter = selfLangTxtAfter.replace('\t','')
66        }
67        let lang = selfLangTxtAfter.split('') //一文字づつに分ける
68        let langMem = '' //一文字づつ格納
69        let i_existBr = 0 //<br>を読み取る
70        let i_existImg = 0 //[img]を読み取る
71        //コンパイル後の文字を格納
72        let langResult = `<!DOCTYPE html>
73        <html lang="jp" dir="ltr">
74          <head>
75            <meta charset="utf-8">
76            <meta name="viewport" content="width=1920,initial-scale=1">\
77          </head>
78          <body>
79          <div class="main__inner" style="width: 100%;">
80          <link rel="stylesheet" href="/css/blog/blog.css">
81          <div class="blog__sec">`
82        //コンパイル本体
83        for (let i = 0; i < lang.length; i++) {
84          langMem += lang[i]
85          //h?
86          if (langMem == '<') {
87            let i_mem = '' //一文字づつ格納
88            while(true) {
89              if (lang.length == i) { break }
90              i_mem += lang[i]
91              //改行があるか探す
92              if (lang[i] == '<' && i_existBr == 0) {
93                i_existBr++
94              } else if (lang[i] == 'b' && i_existBr == 1) {
95                i_existBr++
96              } else if (lang[i] == 'r' && i_existBr == 2) {
97                i_existBr++
98              } else if (lang[i] == '>' && i_existBr == 3) { //改行があった場合
99                i_existBr = 0
100                //i_memにlangの内容を入れていっているため、<br>が入っている。従って消去する。
101                i_mem = i_mem.replace('<br>', '')
102                //1つの文法完成
103                langResult += i_mem
104                langMem = ''
105                i_existBr = 0
106                break
107              } else if(i_existBr > 0) {
108                i_existBr = 0
109              }
110              i++
111            }
112          }
113          else if(langMem == '#'){
114            //一行の長さが不明なため、whiteでループする。その上で#+1の文字数を指すためiを定義した。
115            i += 1
116            let i_mem = '' //一文字づつ格納
117            let hNum = 1 //h?の?の部分にあたるカウント
118            let isHExisting = true //#が存在し続けている限りtrueになる
119            while(true) {
120              //h?を明確にする
121              if (lang.length == i) { break }
122              if (isHExisting && lang[i] != '#') { isHExisting = false }
123              if (lang[i] == '#' && isHExisting) { hNum++ } else if (!isHExisting) { i_mem += lang[i] }
124              //改行があるか探す
125              if (lang[i] == '<' && i_existBr == 0) {
126                i_existBr++
127              } else if (lang[i] == 'b' && i_existBr == 1) {
128                i_existBr++
129              } else if (lang[i] == 'r' && i_existBr == 2) {
130                i_existBr++
131              } else if (lang[i] == '>' && i_existBr == 3) { //改行があった場合
132                i_existBr = 0
133                //i_memにlangの内容を入れていっているため、<br>が入っている。従って消去する。
134                i_mem = i_mem.replace('<br>', '')
135                //1つの文法完成
136                langResult += '<h' + hNum + '>' + i_mem + '</h' + hNum + '>'
137                langMem = ''
138                i_existBr = 0
139                break
140              } else if(i_existBr > 0) {
141                i_existBr = 0
142              }
143              i++
144            }
145          } else {
146            //p
147            let i_mem = '' //一文字づつ格納
148            while(true) {
149              if (lang.length == i) { break }
150              i_mem += lang[i]
151              //改行があるか探す
152              if (lang[i] == '<' && i_existBr == 0) {
153                i_existBr++
154              } else if (lang[i] == 'b' && i_existBr == 1) {
155                i_existBr++
156              } else if (lang[i] == 'r' && i_existBr == 2) {
157                i_existBr++
158              } else if (lang[i] == '>' && i_existBr == 3) { //改行があった場合
159                i_existBr = 0
160                //i_memにlangの内容を入れていっているため、<br>が入っている。従って消去する。
161                i_mem = i_mem.replace('<br>', '')
162                //1つの文法完成
163                langResult += '<p>' + i_mem + '</p>'
164                langMem = ''
165                i_existBr = 0
166                break
167              } else if(i_existBr > 0) {
168                i_existBr = 0
169              }
170              i++
171            }
172          }
173        }
174        langResult += `</div>
175        </div>
176        </body>
177        </html>`
178        return langResult
179      })
180      const blogCreate = () => {
181        const formData = new FormData()
182        formData.append('title', data.title)
183        formData.append('tags', data.tags)
184        formData.append('content', data.selfLangTxt)
185        formData.append('imageMV', data.imageMV)
186        formData.append('images', data.images)
187        axios.post(store.state.API_URL + 'createblog', formData, { headers: { 'content-type': 'multipart/form-data' } }).then((responce) => {
188          console.log(responce)
189        }).catch((error) =>  {
190          console.log(error)
191        });
192      }
193      const moveToTrash = (e) => {
194        data.images[e.target.parentNode.id] = null
195        e.target.parentNode.remove()
196      }
197      const getMVFile = (e) => {
198        const files = e.target.files
199        data.imageMV = files[0]
200      }
201      const getImageFile = (e) => {
202        const files = e.target.files
203        data.images[e.target.parentNode.id] = files[0]
204      }
205      return { data, realTimeCompileSystem, blogCreate, pushTab, moveToTrash, getMVFile, getImageFile }
206    },
207  }
208</script>

アップロードしている関数は、以下のようなプログラムです。

vue
1const blogCreate = () => {
2        const formData = new FormData()
3        formData.append('title', data.title)
4        formData.append('tags', data.tags)
5        formData.append('content', data.selfLangTxt)
6        formData.append('imageMV', data.imageMV)
7        formData.append('images', data.images)
8        axios.post(store.state.API_URL + 'createblog', formData, { headers: { 'content-type': 'multipart/form-data' } }).then((responce) => {
9          console.log(responce)
10        }).catch((error) =>  {
11          console.log(error)
12        });
13      }

m.ts10806

2021/01/16 00:52

デバッグはされたのでしょうか。リクエストに想定の情報がきちんと含まれているかとか

_string

2021/01/16 03:38

デバックはいたしました。サーバーに送り、$requestを返してそれをconsole.logした結果、画像のデータのみが[Object file]と表示されてしまいました。従って、サーバーに画像データが送られておらず、vue側のプログラムが間違っているのではないかと考えました。ですが、その方法をGoogleにて探してもありませんでした。という現状です。

yuki84web

2021/01/17 06:53

他にデバッグするとしたらaxios.postする際の中身とサーバー側の受信データの中身でしょうか

行動規範の内容に同意します

回答1件

自己解決

解決しました。
サーバーにimgファイルは送信がされていたのですが、Requestをそのまま返すと何故かその間にnullになるようです...。
従って、サーバーに送信後サーバー内にてimgファイルを開くことができました。

投稿2021/01/27 02:17

_string

総合スコア15

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

vuejsからLaravelのサーバーに画像をアップロードすることができなくて困っている。

関連した質問