vue文件上传前预览文件
时间: 2023-10-12 19:05:11 浏览: 40
您可以使用HTML5的File API来实现Vue文件上传前预览文件功能。以下是一个示例代码:
```html
<template>
<div>
<input type="file" ref="fileInput" @change="previewImage" />
<img :src="previewUrl" />
</div>
</template>
<script>
export default {
data() {
return {
previewUrl: '',
};
},
methods: {
previewImage() {
const file = this.$refs.fileInput.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.previewUrl = e.target.result;
};
},
},
};
</script>
```
这个示例代码中,我们首先在模板中添加一个文件上传的输入框和一个图片标签用于显示预览图片。
然后在数据中定义了一个预览图片的URL属性。
在methods中,我们定义了一个预览图片的方法`previewImage()`,使用了HTML5的File API,通过`FileReader`读取文件,并使用`readAsDataURL()`方法将文件内容转换为DataURL,然后将DataURL设置给预览图片的URL属性。
由于使用了ref,我们可以通过`this.$refs.fileInput`获取到上传文件的输入框,然后通过`this.$refs.fileInput.files[0]`获取到上传的文件。