javascript - 使用 vuetify "<v-file-input>"上传之前预览图像？

Question

这就是我现在拥有的

      <v-file-input
            v-model="image"
            type="file"
            class="input"
            label="Upload license"
            hint="Add a picture of youre license"
            outlined
            dense
            @change="onFileChange"
          />

          <v-img :src="image" />

只是让你知道，我知道如何用“”做到这一点，它看起来像这样:

createImage (file) {
  const image = new Image()
  const reader = new FileReader()
  const vm = this

  reader.onload = (e) => {
    vm.image = e.target.result
    console.log(vm.image)
  }
  reader.readAsDataURL(file)
   },        
 onFileChange (e) {
  const files = e.target.files || e.dataTransfer.files
  if (!files.length) { return }
  this.createImage(files[0])
},

只需在输入标记上调用 onFileChange，如 @change="onFileChange"

Answer 1

<v-file-input>返回 @change 上的文件本身与原生不同的事件<input type="file" /> 。所以在这种情况下e.target.files那里不存在，e是文件本身。另外我建议不要分享 image对于两者v-file-input和v-img 。 v-img需要一个 url 和 v-file-input需要一个文件。相反，我建议将其拆分为 2 个不同的变量，例如 image和imageUrl .

下面您可以看到一个示例:

<v-file-input v-model="image" outlined dense @change="onFileChange" />
<v-img :src="imageUrl" />

data() {
  return {
    image: undefined,
    // to save image url
    imageUrl: ""
  };
},
methods: {
  createImage(file) {
    const reader = new FileReader();

    reader.onload = e => {
      this.imageUrl = e.target.result;
    };
    reader.readAsDataURL(file);
  },
  onFileChange(file) {
    if (!file) {
      return;
    }
    this.createImage(file);
  }
}

这是一个工作示例:https://codepen.io/onelly/pen/xxOBJjL