使用vue.js多次将上传的文件值分配给输入字段

Question

在上传时将文件名分配给输入字段，然后显示成功消息正常，但是当我尝试删除文件并再次上传时，它无法正常工作！

＆＃13;

＆＃13;

new Vue({
  el: "#app",
  data() {
    return {
      form: {
        message: '',
        fileurl: ''
      },
      loading: false
    }
  },
  methods: {


    uploadImage(event) {

      this.form.fileurl = 'uploaded!'
    },
    deleteFile(furl) {

      this.form.fileurl = ''
    }

  }
})

＆＃13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

span {
  color: red;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


<div id="app">
  <h3>
    File Upload / remove Demo
  </h3>
  <hr />

  <div class="custom-file attach_file" v-show="!form.fileurl">

    <input type="file" id="file" name="file" @change="uploadImage($event)">

    <input type="text" v-model="form.fileurl">

  </div>

  <p v-if="form.fileurl"> {{ form.fileurl }} <span @click="deleteFile(form.fileurl)">Delete</span></p>

</div>

＆＃13;

＆＃13;

＆＃13;

我也没有收到任何控制台错误。

这是我到目前为止所尝试过的。 你们可以看看这个！

Answer 1

您需要先清除输入字段。

使用此更新上传方法。

 uploadImage(event) {
     this.form.fileurl =  'uploaded!'
     this.success = false
     this.$nextTick(() => {
     this.success = true
 })

看一下这个工作演示

https://jsfiddle.net/asimshahzad/8c9pcfys/

Answer 2

问题是当您选择同一文件时，@change不会触发。最简单的解决方案是单击delete

时重置输入值

this.$refs.fileToUpload.value = '';

＆＃13;

＆＃13;

new Vue({
  el: "#app",
  data() {
    return {
      form: {
        message: '',
        fileurl: ''
      },
      loading: false
    }
  },
  methods: {


    uploadImage(event) {

      this.form.fileurl = 'uploaded!'
    },
    deleteFile(furl) {

      this.form.fileurl = ''
      this.$refs.fileToUpload.value = '';
    }

  }
})

＆＃13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

span {
  color: red;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


<div id="app">
  <h3>
    File Upload / remove Demo
  </h3>
  <hr />

  <div class="custom-file attach_file" v-show="!form.fileurl">

        <input type="file" id="file" name="file"  class="custom-file-input" @change="uploadImage($event)" ref="fileToUpload">

    <input type="text" v-model="form.fileurl">

  </div>

  <p v-if="form.fileurl"> {{ form.fileurl }} <span @click="deleteFile(form.fileurl)">Delete</span></p>

</div>

＆＃13;

＆＃13;

＆＃13;