基于Supermap前端开发图片及PDF存储显示

基于Supermap前端开发图片及PDF存储显示

---

---

前言

在项目开发过程中，需要实现图片（img，png）和PDF文档的存储、显示及下载功能。其中PDF文档不能限制文件大小。在网上搜索了大量博客，最后做出如下总结：

• 图片的存储类型可以是Blob格式（二进制对象）和Base64格式，同样浏览器解析时对于两种编码格式都能运行，但是Base64编码过长（即存储文件或图片过大）会导致浏览器无法完成解析，图片无法加载。但是Blob类型的二进制对象（一串较短的字符串）对于比较大的图片文件也可以解析显示。
• 图片上传应用到的标签：<input type="file" accept="image/*" ref="file" @change="upload" multiple/>。通过input标签上传的文件，在调用upload方法时会生成Base64编码，但我们需要的是Blob二进制类型的。下文会进行描述。
• 图片及PDF文件的显示标签<iframe :src="item.iconBase64" align="middle" width="100%" height="100%" frameborder="1"></iframe>。既可以完成图片和PDF文件的显示功能，还可以进行文件下载（图片可以右击下载）。

一、图片的Base64编码转Blob二进制

原理：通过input标签将图片数据（以下图片和PDF统称为图片数据）转为Base64编码，拿到转化后的Base64编码在通过Supermap iserver的POST方式上传到Supermap的工作空间，在上传之前将Base64编码转化为Blob二进制类型。其中Supermap的工作空间中新建点（或者线面）数据集，然后新增文本型字段，字符长度可以加长一些。超图官方客服提供的图片上传方法：isever图片上传
不多说，上代码：

<template>
	<div>
		<input type="file" accept="image/*" ref="file" @change="upload"  multiple/>
	</div>
</template>

<script>
export default {
    data() {
        return {
           ruleForm:{
				Base64ToBlob:[],
			}
        }
    },
    
    methods:{
        upload(){
            let dataFiles = this.$refs.file.files;
            for(let i=0;i<dataFiles.length;i++){
                let imgFile = new FileReader();
                imgFile.readAsDataURL(dataFiles[i]);
                imgFile.onload = res => {
                    // 将Base64编码转为Blob二进制类型
                    this.ruleForm.Base64ToBlob.push(URL.createObjectURL(this.dataURLtoBlob(res.target.result)))
                };
            }
        },
       
        dataURLtoBlob(dataurl) {//将iconBase64编码转为blob(二进制)
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },    
    }
}
</script>

二、图片数据显示

1.引入库

代码如下（示例）：

<iframe :src="ruleForm.iconBase64" align="middle" width="100%" height="100%" frameborder="1"></iframe>

其中ruleForm.iconBase64为Blob二进制数据。iframe标签的使用可以参考如下两个链接：
链接一
链接二

---

总结

如果有更好的建议欢迎在评论区留言。