elementui缩略图文件回显

如果你想在 ElementUI 中回显缩略图文件，你可以使用 `<el-image>` 组件。

首先，在你的模板中，你需要使用 `<el-image>` 组件来显示图片。例如：

<el-image
  style="width: 100px; height: 100px"
  :src="thumbnailUrl"
  :preview-src-list="[imageUrl]"
/>

在这个例子中，我们使用 `thumbnailUrl` 属性来指定缩略图的 URL，使用 `imageUrl` 属性来指定完整尺寸图片的 URL。当用户点击缩略图时，`<el-image>` 组件会显示完整尺寸的图片。

接下来，你需要在你的 JavaScript 代码中生成缩略图的 URL。你可以使用 JavaScript 的 `canvas` 元素来生成缩略图。例如：

function generateThumbnailUrl(file, callback) {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    const image = new Image()
    image.src = reader.result
    image.onload = () => {
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      const maxDimension = 100
      let width = image.width
      let height = image.height
      if (width > height) {
        if (width > maxDimension) {
          height *= maxDimension / width
          width = maxDimension
        }
      } else {
        if (height > maxDimension) {
          width *= maxDimension / height
          height = maxDimension
        }
      }
      canvas.width = width
      canvas.height = height
      context.drawImage(image, 0, 0, width, height)
      callback(canvas.toDataURL())
    }
  }
}

在这个例子中，`generateThumbnailUrl` 函数接受一个文件对象和一个回调函数作为参数。它使用 `FileReader` 对象来读取文件内容，并将其转换为 `Image` 对象。然后，它使用 `canvas` 元素来生成缩略图，并将其转换为 Data URL，最后通过回调函数返回结果。

最后，你需要在上传文件时调用 `generateThumbnailUrl` 函数，将生成的缩略图 URL 保存到一个变量中，然后将其传递给 `<el-image>` 组件。例如：

const fileInput = document.getElementById('file-input')
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0]
  generateThumbnailUrl(file, thumbnailUrl => {
    // 将 thumbnailUrl 保存到一个变量中
    const imageUrl = URL.createObjectURL(file)
    // 将 imageUrl 和 thumbnailUrl 传递给 <el-image> 组件
    // ...
  })
})

在这个例子中，我们使用 `addEventListener` 函数来监听文件上传事件。当用户选择了一个文件时，我们调用 `generateThumbnailUrl` 函数来生成缩略图，并将其保存到 `thumbnailUrl` 变量中。然后，我们使用 `URL.createObjectURL` 函数来生成完整尺寸图片的 URL，并将其传递给 `<el-image>` 组件的 `preview-src-list` 属性。最后，我们将 `thumbnailUrl` 和 `imageUrl` 传递给 `<el-image>` 组件的 `src` 和 `preview-src-list` 属性，以便正确显示缩略图和完整尺寸图片。