项目需求:上传图片并预览,要求可以预览tiff格式的图片。
上传组件用的el-upload,处理tiff格式图片使用了tiff.js
首先,使用npm安装element-ui和tiff.js
npm install element-ui npm install tiff.js在main.js中引用elementUI
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)上传组件所在的vue页面
<template> <div> <el-upload class="upload-demo" drag :on-change="handleChange" :file-list="fileList" list-type="picture" :auto-upload="false" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> </el-upload> </div> </template> <script> export default { data () { return { fileList: [] } }, methods: { handleChange(file, fileList) { let fr = new FileReader(); let _file = file; fr.onloadend = function (e) { var Tiff = require('tiff.js'); var image = new Tiff({ buffer: e.target.result }); _file.url = image.toDataURL(); } fr.readAsArrayBuffer(file.raw); } } } </script>预览效果如图: