如何在 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;
  }
}