vue 点击按钮上传图片

你可以使用HTML5中的input标签，type为file，来实现上传图片的功能。具体步骤如下：

1. 在 Vue 组件的 template 中添加一个 input 标签，type 为 file。

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="submitFile">上传</button>
  </div>
</template>

2. 在 Vue 组件的 methods 中添加处理方法 handleFileUpload，用于读取上传的文件。

methods: {
  handleFileUpload(event) {
    this.file = event.target.files[0];
  },
  submitFile() {
    // 这里可以添加上传文件的代码
  }
}

3. 在 submitFile 方法中，你可以使用 FormData 对象来将上传的文件发送到后端。具体代码如下：

submitFile() {
  const formData = new FormData();
  formData.append('file', this.file);
  axios.post('/api/upload', formData)
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

其中，axios 是一个常用的发送 HTTP 请求的 JavaScript 库，/api/upload 是你的后端接口地址，根据实际情况进行修改。

这样，当用户选择文件后，就可以通过 handleFileUpload 方法获取到文件，并在点击“上传”按钮时将文件发送到后端。