Element组件el-input选择图片后预览显示

在Vue.js中，使用Element UI的el-input组件选择图片并预览，可以通过结合el-upload组件来实现。以下是一个简单的例子：

<template>
  <div>
    <!-- 图片上传 -->
    <el-upload
      action="#"
      list-type="text"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
    </el-upload>
 
    <!-- 图片预览 -->
    <el-input
      v-model="imageUrl"
      readonly
      placeholder="图片预览"
      prefix-icon="el-icon-picture"
      style="margin-top: 10px;"
    ></el-input>
 
    <img :src="imageUrl" alt="图片预览" style="max-width: 300px; margin-top: 10px;">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: '', // 图片预览的URL
    };
  },
  methods: {
    handleChange(file) {
      // 当文件改变时，获取文件并创建URL预览
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
};
</script>

在这个例子中，我们使用了el-upload组件来上传图片，并通过on-change事件来监听文件的选择。当选择文件后，我们通过URL.createObjectURL方法创建一个可以预览的图片URL，并将其赋值给el-input组件的v-model绑定的数据属性imageUrl。这样，用户就可以在el-input中看到图片的预览。