vue图片上传并预览

在Vue中实现图片上传并预览的过程如下：

首先，要在Vue项目中使用图片上传功能，需要在组件中添加一个文件上传input元素，并设置其类型为"file"，同时在data中定义一个变量来保存上传的文件对象和预览的图片URL。例如：

<input type="file" @change="handleImageUpload">
<img :src="previewImage" v-if="previewImage">

其次，在methods中，需要定义一个处理图片上传的函数。在函数中，首先获取用户选择的文件，并将其赋值给data中的变量。然后利用FileReader将文件转换成Data URL的形式，以便在浏览器端预览。最后，将转换后的URL保存在data中的变量中，以便在页面上进行预览。例如：

handleImageUpload(event) {
  const file = event.target.files[0]; 
  this.image = file; 
  const reader = new FileReader(); 
  reader.onload = () => {
    this.previewImage = reader.result; 
  }
  reader.readAsDataURL(file); 
}

接下来，在data中定义一个用于保存预览图片的变量previewImage，并将其初值设置为null。这个变量会在上传文件并预览时使用。例如：

data() {
  return {
    image: null,
    previewImage: null
  }
}

最后，将上传的文件和预览的图片URL绑定到页面上，以实现图片上传并预览的功能。例如，在input元素中使用@change监听文件选择事件，然后调用handleImageUpload方法进行文件上传和预览。在img元素中使用v-if指令判断预览图片的URL是否存在，如果存在，则显示预览图片。例如：

<input type="file" @change="handleImageUpload">
<img :src="previewImage" v-if="previewImage">

以上就是使用Vue实现图片上传并预览的简单过程。