js、vue清空input file的值

起因

vue需求：table每一行都有上传图片按钮，旁边隐藏了input上传文件框，input框中添加change事件，可以给每一行都可以进行上传图片
问题：上一行上传了一张图片后，下面行选择相同的图片就无法上传
原因：input上传的文件未发生改变，所以无法触发change事件
解决:当我们上传时取消掉原来的file值

原生js解决方法

<button class="btn background" @click="addImg()">添加图片</button>
<input v-show="false" type="file" id="file" ref="imgRef"
@change="getImg($event)" multiple="multiplt" 
accept=".png, .jpg, .svg, .gif">

addImg(){ // 上传图片
      if(!this.scopId){ // 如果当前是添加图片非编辑状态 input置空
        let file = document.getElementById('file');
        file.value = '';
      }
      this.$refs.imgRef.click() // 调用隐藏的上传文件的input框
    },

符合vue模式的改进 有ref就不需要id了

<input v-show="false" type="file" ref="imgRef"
@change="getImg($event)" multiple="multiplt"
accept=".png, .jpg, .svg, .gif">

addImg(){ // 上传图片
      if(!this.scopId){ // 如果当前是添加图片非编辑状态 input置空
        this.$refs.imgRef.value =''
      }
      this.$refs.imgRef.click() // 调用隐藏的上传文件的input框
    },

另外：找资料发现还能用 重置file的outerHTML方式实现
但是我测试并没有成功，有没有大佬帮忙指正一下，感激不尽

 addImg(){ // 上传图片
      if(!this.scopId){
        let file = document.getElementById('file');
        // file.value = '';
        file.outerHTML = file.outerHTML; //重置了file的outerHTML
      }
      this.$refs.imgRef.click() // 调用隐藏的上传文件的input框
    },