railsのfile_fieldを編集してuploadの画像が表示されるようにする

7406 ワード
Vue.js Rails Rails テキストリンク

目的

画像のアップロードが

こういうのでダサいのでデザインを変えたい！しかしじつはこのファイルを選択ボタンとfile名が表示されるのは同じでどちらかを消してデザインを足すというのができない。。。なので２つとも消してuploadしたファイルのプレビューを出す方法を下記にまとめた。

fileuploadのデザインを変える

          <label for="post_image" class="btn btn-outline-secondary"><i class="fas fa-upload"></i>サムネイル画像（任意）</label>
          <%= f.file_field :image , class: "hidden" , "v-on:change" => "onFileChange" %>
          </label>

file_fieldをhiddenで消してlabelにデザインを入れる。forとidでつなげるのを忘れずに

デザインを消すとuploadした画像がわからなくなるのでvueで表示

    <div id="app">
      <div class="row" v-show="uploadedImage">
        <div class="col-md-12 col-sm-12 image_upload">
          <img :src="uploadedImage" class="rounded form_thum_image" />
        </div><!--12-->
      </div><!--row-->
      <div class="row">
        <div class="col-md-12 col-sm-12 image_upload">
          <label for="post_image" class="btn btn-outline-secondary"><i class="fas fa-upload"></i>サムネイル画像（任意）</label>
          <%= f.file_field :image , class: "hidden" , "v-on:change" => "onFileChange" %>
          </label>
        </div><!--12-->
      </div><!--row-->
    </div>
app.js
import Vue from 'vue/dist/vue.esm';

var app = new Vue({
  el: '#app',
  data() {
    return {
      uploadedImage: '',
    };
  },
  methods: {
    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      this.createImage(files[0]);
    },
    // アップロードした画像を表示
    createImage(file) {
      let reader = new FileReader();
      reader.onload = (e) => {
        this.uploadedImage = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
})

上記で"v-on:change"でuploadしたら発火するようにする。

Elasticsearchインストール構成
[伯俊]9934完全バイナリツリー(Java)