v-model不支持input type =“file”

Question

我不能在文件輸入中使用v-model ，Vue說我必須使用v-on:change 。 好的，我可以使用v-on:change ，但是如何將輸入文件的“內容”綁定到data屬性？

假設我想將它綁定到this.file的組件中：

export default {
  data() {
    file: null
  },
  // ...
}

這是HTML部分：

<input id="image" v-on:change="???" type="file">
<!--                           ^- don't know how to bind without v-model -->

我該怎么做綁定？

Answer 1

在onchange事件中，您應該將事件對象傳遞給函數並處理：

onFileChange(e) {
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length)
    return;
  this.createImage(files[0]);
},

Answer 2

使用帶有文件輸入的v-model是沒有意義的，因為你無法在文件輸入上設置一個值 - 那么雙向綁定應該在這里做什么呢？

只需使用v-on:change