el-upload 上传单张图片

以下是使用el-upload组件上传单张图片的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="#"
    :auto-upload="false"
    :on-change="handleChange"
    :file-list="fileList"
    :limit="1"
    list-type="picture-card">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleChange(file, fileList) {
        // 限制只能上传一张图片
        if (fileList.length > 1) {
          fileList.splice(0, fileList.length - 1);
        }
        // 处理上传成功后的回调
        if (file.status === "success") {
          // 在这里可以获取到上传成功后的文件信息
          console.log(file.response);
        }
      }
    }
  };
</script>

在上述代码中，我们使用了el-upload组件，并设置了以下属性：

- `:auto-upload="false"`：禁止自动上传文件，需要手动触发上传。
- `:on-change="handleChange"`：当文件状态改变时触发handleChange方法。
- `:file-list="fileList"`：用于回显已上传的文件列表。
- `:limit="1"`：限制最多只能上传一张图片。
- `list-type="picture-card"`：设置上传列表的样式为图片卡片。

在handleChange方法中，我们对上传的文件进行了一些处理：

- 限制只能上传一张图片。
- 处理上传成功后的回调，可以在这里获取到上传成功后的文件信息。