Vue 文档中图片上传与预览函数的实现方式

在Vue项目开发中，图片上传与预览功能是非常常见的需求。合理实现这些功能，能够极大提升用户体验。下面我们就来探讨一下Vue文档中图片上传与预览函数的实现方式。

首先是图片上传功能的实现。在Vue中，我们可以通过<input>标签的type="file"来触发文件选择对话框。利用v-on指令绑定change事件，当用户选择文件后，会触发相应的处理函数。在处理函数里，我们可以获取到用户选择的文件对象。

例如：

<template>
  <input type="file" v-on:change="handleFileChange">
</template>

<script>
export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      // 这里可以进行文件格式、大小等校验
      // 之后可以将文件发送到服务器进行上传
    }
  }
}
</script>

对于将文件发送到服务器，我们可以使用axios等HTTP库。构建一个包含文件的FormData对象，设置好请求头，然后发送POST请求到服务器指定接口。

接下来是图片预览功能。实现图片预览有多种方式。一种简单的方法是利用FileReader对象。在上述handleFileChange函数中，获取到文件对象后，创建一个FileReader实例。

handleFileChange(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    this.previewImage = reader.result;
  }
  if (file) {
    reader.readAsDataURL(file);
  }
}

在模板中，通过<img>标签展示预览图片：

<template>
  <img v-if="previewImage" :src="previewImage" alt="Preview">
</template>

另一种方式是使用URL.createObjectURL方法。同样在handleFileChange函数里：

handleFileChange(event) {
  const file = event.target.files[0];
  if (file) {
    this.previewImage = URL.createObjectURL(file);
  }
}

使用这种方式时，需要注意在组件销毁时，要释放创建的对象URL，防止内存泄漏。

beforeDestroy() {
  if (this.previewImage) {
    URL.revokeObjectURL(this.previewImage);
  }
}

通过以上方法，我们可以在Vue项目中轻松实现图片上传与预览功能，满足不同的业务需求。