의 목적

이미지 업로드 성공

촌스러워서 디자인을 바꾸고 싶어요!그러나 실제로 선택 단추와 파일 이름이 이 파일에 표시되는 것은 같습니다. 그 중 하나를 삭제해서 디자인을 추가할 수 없습니다.따라서 업로드된 파일 미리보기를 제거할 수 있는 두 가지 방법을 요약해 보겠습니다.

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_하이든으로 필드를 없애고 label에 디자인을 넣습니다.for와 id로 연결하는 거 잊지 마세요.

디자인을 취소하면 업로드된 이미지가 흐리멍덩해지기 때문에 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'가 올라오면 불이 납니다.