vue 实现图片上传

Vue.js是一款流行的JavaScript框架，可以帮助我们快速开发现代化的Web应用程序。下面是一个简单的Vue.js组件，它可以帮助你实现图片上传。

HTML:

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <img :src="imageUrl" v-if="imageUrl" />
  </div>
</template>

JavaScript:

<script>
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageUrl = reader.result;
      };
    },
  },
};
</script>

在这个组件中，我们使用了一个`<input>`元素来让用户选择要上传的图片。当用户选择了图片后，我们使用`FileReader`对象将图片转换为Base64编码的字符串，并将其赋值给`imageUrl`变量。最后，我们使用`<img>`元素来显示上传的图片。

需要注意的是，这个组件只是一个简单的图片上传示例，你需要根据你的具体需求来进行修改和扩展。