如何在模态中显示图像预览？

Question

我的组件是这样的：

<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

当用户点击上传图片按钮时，它会显示文件名。我想如果我点击文件名，它会以 modal

的形式显示预览图像

我该怎么做？

Answer 1

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

创建一个模式并将 css 样式对象绑定到它。您可以将 css 样式绑定到此 div

<div id="image-preview" :style="previewStyle"></div>

显示响应式图片的样式对象可以是：

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

稍后在上传文件时使用适当的 url 更新背景图像。

使用图像按钮触发模式 display/close（将 :click 事件绑定到

<p class="filename">{{ fileName }}</p>

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

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

并用 imgSrc

更新背景图片 url

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

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

如何在模态中显示图像预览？

How do I display an image preview in modal?

file-upload

modal-dialog

vue.js

vuejs2

vuetify.js