【Vue.js】アップロードした画像を表示させたい

Question

前提・実現したいこと

Vue.jsを使って開発を行っています。
画像をアップロードして、画面に表示をさせる動きを作っています。
大枠はできたのですが、下記の動きをしたときに、画面に画像が表示されません。

画像が表示されないときの手順

1.初期状態

2.アップロードボタンを押下して、画像をアップロード

3.削除ボタン押下で、画像を削除

4.アップロードボタンを押下して、同じ画像をアップロードしても、画像が表示されない

こちらの手順4で正常に選んだ画像を表示させたいのですが、画像が表示されません。

みなさまのお知恵をお貸しいただければと思います。

現状

コード
Form.vue

<template>
  <div @dragover.prevent="onArea" @drop.prevent="dropFile" @dragleave.prevent="offArea" @dragend.prevent="offArea">
    <img v-if="company.uploaded_image"
         :src="company.uploaded_image"
    />
    <img v-else
         src="~images/default.png"
    />
    <div>
      <button @click="remove" type="button" data-toggle="modal" data-target="#delete"><i class="fas fa-times"></i>削除
      </button>
      <label class="btn"><i class="fas fa-arrow-up"></i>アップロード
        <input type="file" @change="onFileChange">
      </label>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    company: Object
  },
  onFileChange(e) {
    this.company.image_attributes.filename = ''
    const files = e.target.files || e.dataTransfer.files;
    this.createImage(files[0]);
    this.company.new_image_name = files[0].name;
    this.company.image_size = files[0].size;
  },
  createImage(file) {
    const reader = new FileReader();
    reader.onload = e => {
      this.company.uploaded_image = e.target.result;
    };
    reader.readAsDataURL(file);
  },
  remove() {
    this.company.uploaded_image = false;
    this.company.image_attributes.filename = '';
    this.company.uploaded_image = '';
    this.company.new_image_name = '';
    this.company.image_size = '';
  },
  dropFile(e) {
    this.onFileChange(e)
    this.offArea()
  },

  onArea() {
    this.inArea = true
  },
  offArea() {
    this.inArea = false
  },
}
</script>

環境

Vue.js 2.6
Ruby 2.6
Ruby on Rails 6.0

Answer 1

一度アップしたものを取り消した後再度同じものをアップすると@changeが発火しないため、refでDOMを直接引っ張ってvalueを消す

<input type="file" @change="onFileChange" ref="FileUploader">

...

remove() {
  this.company.uploaded_image = false;
  this.company.image_attributes.filename = '';
  this.company.uploaded_image = '';
  this.company.new_image_name = '';
  this.company.image_size = '';
  this.$refs.FileUploader.value = ''; ← NEW
},

Answer 2

こんにちは。一回アップロードして、削除ボタンを押下後、再アップロードしても選択した画像が表示されないということですよね。

アップロード画像は company.uploaded_image が true の場合のみ表示させる仕様になってるようですが、削除後に再度アップロードしても false のままだから表示されないのではないでしょうか。

remove()　で company.uploaded_image を false にしているのに、アップロード処理では true にする処理がないので
onFileChange(e) にて
company.uploaded_image を true にする処理を追加すれば良いと思います。