vue2实现图片上传功能

在Vue2中实现图片上传功能，通常会使用到`axios`或者`fetch`等库来进行HTTP请求，以及HTML5的`FileReader`或`FormData` API来处理文件。以下是简单的步骤：

1. 安装依赖：首先需要安装`axios`库，通过npm或yarn安装：

   npm install axios

2. 创建一个文件上传组件：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="uploadImage">上传</button>
    <p v-if="imageUrl">{{ imageUrl }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      this.setImageUrl(file);
    },
    setImageUrl(file) {
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = URL.createObjectURL(e.target.result);
        };
        reader.readAsDataURL(file);
      }
    },
    uploadImage() {
      if (this.imageUrl) {
        axios.post('/api/upload', { image: this.imageUrl }).then((response) => {
          // 处理上传成功的响应
          console.log(response.data);
        }).catch((error) => {
          // 处理错误
          console.error(error);
        });
      }
    },
  },
};
</script>

在这个例子中，用户选择文件后，图片会被读取成base64格式，并显示在页面上。当点击“上传”按钮时，会将图片数据发送到服务器。