如何在 v-file-input 中檢索文件

Question

<v-file-input
    accept="image/*"
    label="File input"
    v-model="chosenFile"
></v-file-input>

我使用 vue js，如何取回文件內容？

var reader = new FileReader();
var img = new Image();
reader.readAsDataURL(this.chosenFile)

當我使用 FileReader 時，它什么也沒顯示。

Answer 1

這是一個代碼筆： https ://codepen.io/eveningforgery/pen/KKzWrwq

您需要使用閱讀器的結果，即圖像的斑點，以便將其顯示或保存在某處

<img v-if="data" :src="data" alt="">

importImage() {
  var reader = new FileReader();
      
  // Use the javascript reader object to load the contents
  // of the file in the v-model prop
  reader.readAsDataURL(this.chosenFile)
  reader.onload = () => {
    this.data = reader.result;
  }
}