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

迷南。 2024-03-16 23:52 144阅读 0赞

选择图片后显示预览图片

在这里插入图片描述

1.加入点击事件和属性id

在这里插入图片描述
（1）属性accept：接受上传的文件类型（thumbnail-mode 模式下此参数无效）

  1. <el-form-item label="系统Log" label-width="100px">
  2.     <el-input type="file"  @change="previewImage" accept="image/png, image/jpeg" id="sysLog"></el-input>
  3. </el-form-item>
  4.    <el-form-item label="图片预览" label-width="100px">
  5.    <img v-if="previewUrl" :src="previewUrl" style="width: 100px;height: 100px;">
  6. </el-form-item>

2.在methods中添加previewImage方法。通过id获取元素获取file 文件对象

  1. return {
  3.     previewUrl: '',// 预览图片路径
  4. }
  5. methods: {
  7.     previewImage() {
  9.         //通过id获取元素file文件对象
  10.         let file = document.getElementById("sysLog").files[0];
  11.         this.previewUrl = URL.createObjectURL(file);
  12.     },
  13. }

发表评论

表情：
评论列表 （有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读