Question

我使用vutify的v-file-input上传图像，所以我有：

<v-file-input
   label="Image"
    filled
   accept="image/png, image/jpeg, image/bmp"
   prepend-icon="mdi-camera"
   v-model="image"
   ></v-file-input>

在console.log V模型图像的地方，我得到了一个那样的File对象：

File {name: "img.png", lastModified: 1588256009000, lastModifiedDate: Thu Apr 30 2020, webkitRelativePath: "", size: 53258, …}
name: "img.png"
lastModified: 1588256008000
lastModifiedDate: Thu Apr {}
webkitRelativePath: ""
size: 53259
type: "image/png"
....

那么如何将其显示在此Object的组件或另一个子组件中？

Answer 1

创建一个imageUrl的计算属性，该属性返回URL.createObjectURL(image)的值，然后您可以在同一组件中使用imageUrl或将其作为道具传递给孩子组件：

computed: {
   imageUrl() {
       return this.image ? URL.createObjectURL(this.image) : "";
   }
}

将imageUrl用作：

<img :src="imageUrl" />

Vuejs：如何在子组件中显示上传的图像

1 个答案: