在vue项目中试用el-upload上传预览tif/tiff文件

依赖：

tiff.js

思路：

1、使用 scoped-slot 去设置缩略图模版。

2、在缩略图自定义插槽中，试用tiff.js将图片转换显示。

问题：

由于tiff.js转换tif/tiff格式的图片的时候是异步的，所以自定义一个支持异步加载图片的组件

代码：

定义一个可以异步加载图片的组件（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() {
    // 判断是不是tif数据格式，如果是，则试用tif.js处理
    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>

在需要的地方试用thumbnail.vue

<el-upload action="#" list-type="picture-card" :auto-upload="false">
  <i slot="default" class="el-icon-plus"></i>
  <div slot="file" slot-scope="{file}">
      <!-- 支持异步加载图片的组件 -->
      <thumbnail :file="file"></thumbnail>
  </div>
</el-upload>