vue预览各种格式图片png jpg tif tiff dcm

vue预览各种格式图片png jpg tif tiff dcm

// 没有图片展示暂无 有图片，判断格式 png jpg 直接展示 tif tiff需要转化成png展示 dcm需要用到插件
<el-col :span="16"><div style="width:100%;text-align: center;margin-bottom: 10px;">图件预览</div><div style="width: 100%;height: 300px;display: flex;justify-content: center;" v-if="img5"><div class="up_img">暂无</div></div><div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;" v-if="!img5"><div style="width:300px;height: 300px;" v-if="isDcm"><Cornerstone :img="dcmImg" v-if="isDcmTrue"></Cornerstone></div><el-image style="width: 300px; height: 300px;" :src="dcmImg" v-if="!isDcm"></el-image></div>
</el-col>// 循环下载文件getFile(id, type) {this.isDcmTrue = false//后端返回是文件id的数组，需要自己去用文件id调文件下载的接口sliceFileDownload(id).then((res) => {let list = []if (res.data.partList) {res.data.partList.map((item) => {let instance = axios.create({responseType: 'blob',})instance.get(`${item.fileDownloadUrl}`).then((info) => {list.push(info.data)if (res.data.partCount == list.length) {let blob = new Blob(list);let link = document.createElement('a');link.href = window.URL.createObjectURL(blob);if (this.upImgType == 'img') {this.dcmImg = link.href} else if (this.upImgType == 'tif' || this.upImgType == 'tiff') var that = thisinfo.data.arrayBuffer().then((arrayBuffer) => {const tiff = new Tiff({buffer: arrayBuffer,});that.dcmImg = tiff.toDataURL("image/png")//转成png格式的base64图片，将其用img标签展示即可console.log(tiff.toDataURL("image/png"))})}else if (this.upImgType == 'dcm') {this.dcmImg = link.hrefthis.isDcm = truethis.isDcmTrue = true}}})})}})},
// tiff tif 转化需要用到插件
npm i tiff.js --save
import Tiff from 'tiff.js';
//info.data是后端返给你的blob文件流
info.data.arrayBuffer().then((arrayBuffer) => {const tiff = new Tiff({buffer: arrayBuffer,});that.dcmImg = tiff.toDataURL("image/png")//转成png格式的base64图片，将其用img标签展示即可console.log(tiff.toDataURL("image/png"))
})
// dcm文件的组件再之前的文章里有完整代码，复制下来直接可以用