如何使用el-upload手动实现图片上传

el-upload 是 Element UI 中的一个上传组件，可以方便地上传文件，包括图片。下面是使用 el-upload 手动实现图片上传的步骤：

1. 在页面中引入 el-upload 组件，并设置其属性 action、headers、name 和 list-type。其中，action 是上传文件的地址，headers 是上传请求的头部信息，name 是上传文件的字段名，list-type 是上传文件列表的类型，可以设置为 text、picture、picture-card 中的一种。

2. 在 data 中定义 fileList 数组，用来保存上传的文件列表。

3. 在 methods 中定义 handleUpload 方法，用来处理上传文件的逻辑。该方法会接收一个参数 file，表示要上传的文件。在该方法中，可以使用 FormData 对象来创建一个表单数据对象，然后将 file 添加到表单数据中，最后发送上传请求。

4. 在 el-upload 组件中添加 ref 属性，并在 handleUpload 方法中使用 this.$refs.upload.upload() 调用上传方法。

下面是一个示例代码：

<template>
  <el-upload
    ref="upload"
    action="/api/upload"
    :headers="headers"
    :name="name"
    :list-type="listType"
    :file-list="fileList"
    @change="handleUpload">
    <el-button>上传图片</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      },
      name: 'image',
      listType: 'picture',
      fileList: []
    }
  },
  methods: {
    handleUpload(file) {
      const formData = new FormData()
      formData.append('file', file.raw)
      // 发送上传请求
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      }).then(res => {
        console.log(res.data)
        // 上传成功后将文件添加到 fileList 中
        this.fileList.push({
          name: file.name,
          url: res.data.url
        })
      }).catch(err => {
        console.error(err)
      })
      // 手动清空上传文件列表，避免重复上传同一文件时出现问题
      this.$refs.upload.clearFiles()
    }
  }
}
</script>