与本机
这就是我现在拥有的
<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"；
<input type="file" />不同，<v-file-input>在@change事件中返回文件本身。因此，在这种情况下，e.target.files不存在，e就是文件本身。此外，我建议不要为v-file-input和v-img共享image。v-img需要一个url，v-file-input需要一个文件。相反，我建议将其拆分为两个不同的变量，如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
不确定你做得是否正确。您已经在this.url上创建了对象url，因此应该使用它而不是image作为img标记的src值。
<v-img :src="url" />