vue实现上传图片功能

在Vue中，可以使用第三方库如axios和vue-upload-component来实现上传图片功能。

下面是一种基于vue-upload-component的实现方式：

首先安装vue-upload-component库：

npm install vue-upload-component --save

在需要使用上传图片功能的组件中，引入vue-upload-component：

import VueUploadComponent from 'vue-upload-component'

在模板中使用vue-upload-component：

<vue-upload-component
  ref="upload"
  post-action="/upload"
  :headers="{ 'Authorization': 'Bearer ' + token }"
  :preview="true"
  :multiple="false"
  :accept="'image/*'"
  @uploaded="onFileUploaded"
>
  <button slot="before" type="button">选择图片</button>
</vue-upload-component>

在组件中定义onFileUploaded方法来处理上传完成后的操作：

methods: {
  onFileUploaded (file) {
    // 处理上传完成后的操作，如将上传的图片显示在页面上
    console.log(file)
  }
}

其中，post-action指定了上传图片的API接口地址，headers指定了请求头部，preview指定了是否预览上传的图片，multiple指定了是否支持多文件上传，accept指定了上传的文件类型限制。@uploaded事件在上传完成后触发，将上传的文件对象作为参数传入onFileUploaded方法中。

注意：在使用vue-upload-component上传图片时，需要在后端API中处理multipart/form-data类型的请求，获取上传的图片文件并保存到服务器中