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

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

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

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

Q&A

0回答

538閲覧

laravel,vue 画像の保持

ORyohei

総合スコア18

Laravel

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

0グッド

0クリップ

投稿2020/07/31 04:31

laravelで編集画面の時fileデータを取得したい。

laravelとvue.jsでプレブュー機能付きの画像の登録機能を作っています。編集画面で、すでにDBに登録しているデータをimgタグで表示することで画面には画像が表示されているのですが、肝心のinput[file
]にデータが入っていないので、何も変更しないでinput送信すると必須項目のバリデーションに引っかかってしまいます。fileタイプはvalueに値を入れることが出来ないので、vue側で処理を加えればいいか、larave側か、なかなかアイデアが思いつきません。 何かいいアドバイスいただけると嬉しいです。

ProductImg.vue

<template> <div> <li class="p-form--item__file"> <span class="p-form-text">画像</span> <input type="file" placeholder="画像" class="c-file" name="img" value="" ref="file" @change="onFileChange($event)"> <!-- プレビュー用 --> <img :src="imageData" v-if="imageData" class="img-preview" > <!-- DBにすでにデータが入っていた時(商品編集ぺージの時)、表示 --> <img :src="productImg" class="img-preview" :class="{displaynone:edit,displaynone:Isimg ===false}" > </li> <button v-on:click="resetFile" type="button" class="btn p-btn--close" name="img-reset"> 画像を編集する </button> </div> </template> <script> const axios = require('axios'); export default { props: { Productimg :{//imgのファイル値 type: String, default:'', }, Isimg:{//DBにすでに画像があるかどうか type:Boolean, default:false, }, }, data() { return { imageData:'', productImg:'/storage/products_images/'+this.Productimg, edit:false, isimg:this.Isimg, } }, methods: { //------------------------------ //画像リセット //------------------------------ resetFile: function () { const input = this.$refs.file; input.type = 'text';//inputのtypeをtextにして一旦空にする input.type = 'file';//元に戻す this.imageData = '';//dataを空にする this.edit = true; this.Isimg = false; }, //------------------------------ ////画像を読み込み //------------------------------ onFileChange: function (e) { const files = e.target.files; if(files.length > 0) {//画像が選択されたかをチェック var self = this; var file = files[0]; var reader = new FileReader();//文字ファイルを読み込む reader.onload = function(e) { self.imageData = e.target.result; }; reader.readAsDataURL(file);//画像を読み込み } }, }, } </script> <style> </style>

edit.php

@extends('layouts.app') @section('title', '商品編集') @include('nav') @section('content') @include('users.person') <section class="l-inner--wrapper__s"> <div class="l-inner__l"> <main class="main-wrap"> <article class="main"> <section class="" id=""> <div class="l-inner l-inner__m"> <div class="c-inner--title">編集</div> <div class="l-inner--body"> <div class="p-login"> <form method="POST" action="{{ route('products.update',['id' => $product->id]) }}" enctype="multipart/form-data" > @csrf @method('PATCH') @include('products.form') <product-img :Productimg ='@json([$product->img])' :Isimg =@json(true) > </product-img> <div class="submit-btn"> <button class="p-btn--submit c-btn">編集する</button> </div> </form> <div class="submit-btn"> <button class="p-btn--delete c-btn js-modal-open">消去</button> </div> </div> </div> </div> </section> </article> @include('sidebar') </main> </div> </section> <div class="p-modal js-modal"> <div class="p-modal--bg js-modal-close"></div> <form method="POST" action="{{ route('products.destroy', ['product' => $product]) }}" class="form"> <div class="p-modal--content"> <p class="p-modal--txt">この商品を消去しますか?</p> @csrf @method('DELETE') <button class="btn p-btn--close" href="">はい</button> </form> <button class="js-modal-close btn p-btn--close" href="">戻る</button> </div> </div> <input type="file"> @include('footer') @endsection

補足情報(FW/ツールのバージョンなど)

laravel5.8 vue.js

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問