✨
【音声ファイルアップロード機能】call to a member function getclientoriginalname() on n
teratail質問
原因
music_fileが送信できていない？
new!!
cover_imageが送信できていないようだ（7/23）
dd($request->file('cover_image')->getClientOriginalName());
↓
Call to a member function getClientOriginalName() on null
対策
- <input type="file">にファイルを含めて送信
- inputタグに動的にvalueをセットし、divで受け取って送信
- fetchにFormDataを使用してファイルを送信
<input type="file">にファイルを含めて送信
変わらず。
BeforeMusicUploadModal.vue
templete
<input type="file" @change="dropFile">
ファイルドロップ時のイベント
dropFile(event) {
this.files = event.dataTransfer.files
console.log(this.files[0].name)
// this.files.forEach(file => {
// let form = new FormData()
// form.append('file', file)
// this.$axios.post('http://localhost:8000//api/musicFileUpload', form).then(response => {
// console.log(response.data)
// }).catch(error => {
// console.log(error)
// })
// })
this.$emit('openAfterMusicUploadModal', this.files[0], this.files[0].name);
this.isEnter = false;
}
AfterMusicUploadModal.vue
templete
<input type="file" @change="dropFile">
ファイルアップロード
async uploadMusicFile () {
let formData = new FormData();
formData.append('music_file', this.musicFile);
formData.append('cover_image', this.coverImages);
formData.append('title', this.musicFileName);
formData.append('genre', this.genre);
formData.append('emotions', this.emotion);
let config = {
// headers: {
// 'content-type': 'multipart/form-data'
// },
method: "POST",
body: formData
};
fetch("http://localhost:8000/api/musicFileUpload", config)
.then((res)=>{
return( res.json() );
})
.then((json)=>{
// 通信が成功した際の処理
})
.catch((error)=>{
// エラー処理
});
},
ファイルドロップ時のイベント
dropFile(event) {
this.coverImages = event.dataTransfer.files
// console.log(this.coverImages)
// console.log(this.musicFile)
// console.log(this.musicFileName)
},
inputタグに動的にvalueをセット？し、divで受け取って送信
今やってるやつ
BeforeMusicUploadModal.vue
templete
<form method="post" enctype="multipart/form-data">
<div class="drop_area"
@dragenter="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
@drop.prevent="dropFile"
:class="{enter: isEnter}"
>
<p>クリックしてファイルを追加</p>
<p>最大100MB、形式: MP3, AAC</p>
{{files.file}}
</div>
</form>
ファイルアップロード
同じ
ファイルドロップ時のイベント
dropFile(event) {
this.files = [...event.dataTransfer.files]
console.log(this.files[0].name)
// this.files.forEach(file => {
// let form = new FormData()
// form.append('file', file)
// this.$axios.post('http://localhost:8000//api/musicFileUpload', form).then(response => {
// console.log(response.data)
// }).catch(error => {
// console.log(error)
// })
// })
this.$emit('openAfterMusicUploadModal', this.files[0], this.files[0].name);
this.isEnter = false;
}
AfterMusicUploadModal.vue
templete
<form method="post" enctype="multipart/form-data">
<div>
{{musicFile}}
<h3>カバー画像</h3>
<div class="drop_area"
@dragenter="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
@drop.prevent="dropFile"
:class="{enter: isEnter}"
>
<p>クリックして画像を追加</p>
<p>10MB以内 .jpg .png .heic に対応しています。</p>
</div>
{{coverImages[0]}}
</div>
</form>
ファイルアップロード
同じ
ファイルドロップ時のイベント
dropFile(event) {
this.coverImages = [...event.dataTransfer.files]
// console.log(this.coverImages)
// console.log(this.musicFile)
// console.log(this.musicFileName)
},
参考
fetchにFormDataを使用してファイルを送信
参考
nuxt側でPOSTで送ってPUTに変換
corsエラー発生
全てlaravel側で解除しているので、formdataの送信でheader情報を無駄に追加したから起きた？
いったん削除で解決
原因特定
new!!
cover_imageが送信できていないようだ（7/23）
dd($request->file('cover_image')->getClientOriginalName());
↓
Call to a member function getClientOriginalName() on null
どうすれば解決できる？
Discussion