vue项目,elementUI框架,elUpload控件上传预览tiff格式图片

笔记 专栏收录该内容
2 篇文章 0 订阅

项目需求:上传图片并预览,要求可以预览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>

预览效果如图:

在这里插入图片描述

  • 1
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值