Rely on:

tiff.js

Ideas:

1. Use scoped-slot to set thumbnail templates.

2. In the thumbnail custom slot, try tiff. Js to convert the picture to display.

Question:

Tiff. Js converts tif/ TIFF images asynchronously, so customize a component that supports asynchronously loading images

Code:

Define a component that loads images asynchronously (thumbnail.vue)

<template>
  <div>
    <img class="el-upload-list__item-thumbnail" :src="src" alt="">
  </div>
</template>

<script>
import Tiff from 'tiff.js';
export default {
  name: "thumbnail".props: {
    file: { type: Object.required: true}},data() {
    return {
      src: ' '
    };
  },
  created() {
    // Determine if tif data is in tif format. If so, try tif
    let isTif = ['image/tiff'.'image/tif'].includes(this.file.raw.type);
    if (isTif) {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'arraybuffer';
      xhr.open('GET'.this.file.url);
      xhr.onload = (e) = > {
        var tiff = new Tiff({ buffer: xhr.response });
        var canvas = tiff.toCanvas();
        this.src = canvas.toDataURL();
      };
      xhr.send();
    } else {
      this.src = this.file.url; }}};</script>
Copy the code

Try thumbnail.vue where you need it

<el-upload action="#" list-type="picture-card" :auto-upload="false">
  <i slot="default" class="el-icon-plus"></i>
  <div slot="file" slot-scope="{file}">
      <! -- Support asynchronous image loading components -->
      <thumbnail :file="file"></thumbnail>
  </div>
</el-upload>
Copy the code