vue 图片上传

在 Vue 中实现图片上传可以使用 Vue 插件 `vue-upload-component`，它非常方便且易于使用，以下是一个简单的例子。

首先，安装 `vue-upload-component` 插件：

npm install vue-upload-component --save

然后在 Vue 组件中导入插件并使用：

<template>
  <div>
    <upload-component
      ref="upload"
      :url="uploadUrl"
      :headers="uploadHeaders"
      :data="{userId: 123}"
      :extensions="['jpg', 'jpeg', 'png']"
      @input-file="handleInputFile"
    >
      <button>上传图片</button>
    </upload-component>
  </div>
</template>

<script>
import UploadComponent from 'vue-upload-component'

export default {
  components: {
    UploadComponent
  },
  data() {
    return {
      uploadUrl: '/upload',
      uploadHeaders: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    }
  },
  methods: {
    handleInputFile(event) {
      console.log(event.file)
    }
  }
}
</script>

在上面的代码中，我们首先导入 `vue-upload-component` 插件，然后在模板中使用 `upload-component` 标签来渲染图片上传组件。`upload-component` 组件有很多可配置的属性，例如 `url` 表示上传的 URL 地址，`headers` 表示上传请求的头部信息，`data` 表示上传时需要附带的数据，`extensions` 表示允许上传的文件扩展名等等。当用户选择文件后，组件会触发 `input-file` 事件并传递文件对象给父组件，我们在 `handleInputFile` 方法中处理文件对象即可。

需要注意的是，我们可以通过 `ref` 属性来获取到 `upload-component` 组件的实例，进而调用它的方法，例如可以通过 `this.$refs.upload.clear()` 方法清空已选择的文件列表。