Vue.js上传图片功能删除后重传同一张图片无法显示问题求助

问题原因 #

1. 文件输入框未清空值：type="file"的输入框在选择文件后会保留当前选中的文件值，若两次选择同一个文件，输入框的value没有发生变化，不会触发@change事件，导致上传逻辑未执行。
2. Vue2响应式丢失：直接修改props传入的company对象的属性，若这些属性未在company初始化时提前定义，Vue2无法监听属性的变化，即使赋值成功视图也不会更新。
3. 方法配置错误：当前脚本中所有业务方法没有放在Vue的methods配置项内，Vue无法识别这些方法，事件绑定会直接失效。
4. remove方法冗余赋值：重复对company.uploaded_image赋值，属于无效代码。

修复步骤 #

1. 给文件输入框添加ref标识，方便后续操作输入框的value
2. 在文件上传逻辑执行完成后清空输入框的value，保证下次选择同一文件也能触发change事件
3. 使用Vue2提供的$set方法修改对象属性，保证响应式生效
4. 将所有业务方法移入methods配置项
5. 清理remove方法中的冗余代码

修正后完整代码 #

<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>remove
      </button>
      <label class="btn"><i class="fas fa-arrow-up"></i>upload
        <!-- 新增ref -->
        <input type="file" ref="fileInput" @change="onFileChange">
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    company: Object
  },
  // 所有方法移入methods配置项
  methods: {
    onFileChange(e) {
      this.$set(this.company.image_attributes, 'filename', '')
      const files = e.target.files || e.dataTransfer.files;
      this.createImage(files[0]);
      this.$set(this.company, 'new_image_name', files[0].name)
      this.$set(this.company, 'image_size', files[0].size)
      // 清空文件输入框的值
      this.$refs.fileInput.value = ''
    },
    createImage(file) {
      const reader = new FileReader();
      reader.onload = e => {
        // 用$set保证响应式
        this.$set(this.company, 'uploaded_image', e.target.result)
      };
      reader.readAsDataURL(file);
    },
    remove() {
      this.$set(this.company.image_attributes, 'filename', '')
      // 清理冗余赋值，直接设为空字符串即可
      this.$set(this.company, 'uploaded_image', '')
      this.$set(this.company, 'new_image_name', '')
      this.$set(this.company, 'image_size', '')
    },
    dropFile(e) {
      this.onFileChange(e)
      this.offArea()
    },
    onArea() {
      this.inArea = true
    },
    offArea() {
      this.inArea = false
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者katahik