时间戳

首页 > 解决方案 > 如何以模态显示图像预览？

vue.js - 如何以模态显示图像预览？

问题描述

我的组件是这样的：

<input type="file"
   ref="file"
   @change="onFileChange"
   class="d-none"
   :accept="accept">
<button type="button" @click="selectFile">

我的方法是这样的：

  methods: {
    selectFile(){
      this.$refs.file.click()
    },
    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return
      }
      this.fileName = files[0].name
      this.createImage(files[0])
    },
    createImage(file) {
      var image = new Image()
      var reader = new FileReader()

      reader.onload = (e) => {
        this.file = e.target.result;
        this.$emit('change', this.file)
      }
      reader.readAsDataURL(file)
    }
  }

我的完整代码和演示如下：https ://codepen.io/positivethinking639/pen/JjGNGgg

当用户单击上传图像按钮时，它会显示文件名。我想如果我点击文件名，它将以模态的形式显示预览图像

我该怎么做？

标签： vue.jsfile-uploadvuejs2modal-dialogvuetify.js

解决方案

您可以将问题分解为更小的问题来解决：

  1. 创建一个模态并将 css 样式对象绑定到它。您可以将 css 样式绑定到此 div
<div id="image-preview" :style="previewStyle"></div>

用于显示响应式图像的样式对象可以是：

      previewStyle: {
        width: '300px',
        height: '300px',
        display: 'none',
        backgroundSize: 'cover',
        backgroundImage: ''
      }

然后，您稍后在上传文件时使用适当的 url 更新 backgroundImage。

  1. 触发模式以显示/关闭图像按钮（绑定 :click 事件到
<p class="filename">{{ fileName }}</p>

激活模态（基本上更新了上面样式对象的'display'属性。3.模态必须显示所选图像的预览。这里最重要的部分是获取上传的blob对象的URL，你可以使用JS和目标文件上传输入：

const imgSrc = URL.createObjectURL(this.$refs.file.files[0]);

并使用 imgSrc 更新 backgroundImage url

这是一个如何完成的示例：

https://codepen.io/duongph/pen/MWKmybL

推荐阅读