el-upload 展示图片方式 fit

el-upload 组件可以用于上传图片，但是它本身并不提供图片展示的功能，需要结合其他组件来实现展示图片。展示图片的方式有很多种，其中一种方式是使用 CSS 的 `object-fit` 属性来控制图片的展示方式。

具体实现方法如下：

1. 在 el-upload 组件中设置 `show-file-list` 属性为 `false`，这样上传的图片不会自动展示在组件中。

2. 在页面中添加一个图片展示组件，比如 el-image。

3. 在上传成功的回调函数中，将上传的图片文件设置为 el-image 组件的 `src` 属性，同时设置 `fit` 属性为需要的展示方式，比如 `cover`、`contain` 等。

示例代码如下：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :show-file-list="false"
      :on-success="handleSuccess"
    >
      <el-button slot="trigger">上传图片</el-button>
    </el-upload>
    <el-image v-if="imageUrl" :src="imageUrl" :fit="fit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      fit: 'cover',
    }
  },
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.url
    },
  },
}
</script>

在上面的代码中，我们使用了 el-image 组件来展示上传的图片，同时根据需要设置了 `fit` 属性为 `cover`，表示将图片按比例缩放并裁剪，以填充容器。你也可以根据需要设置为其他的展示方式，比如 `contain`、`fill` 等。