npm安装:
npm install shapefile --save-dev
源码:
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue'; // 引入 ref
import * as shapefile from "shapefile";// 使用 ref 创建一个引用
const uploadRef = ref(null);// 解析文件
const fileChange = (param) => {console.log(param.file)// 直接使用 uploadRef 引用来调用 clearFiles 方法uploadRef.value.clearFiles()const reader = new FileReader()const fileData = param.file// 读取文件reader.readAsArrayBuffer(fileData)reader.onload = function () {// 定义geojson数组, 一个shp里会有多个面, 即有多个geometrylet geojsonArr = []shapefile.open(this.result).then((source) => {source.read().then(function log(result){if (result.done) {// 解析完成console.log(geojsonArr)}const json = result.valuegeojsonArr.push(json)return source.read().then(log)})}).catch((error) => {console.error(error.stack)ElMessage.error("读取shp文件失败")})}
}
</script>
<template><el-upload ref="uploadRef" action="111111" :limit="1" :file-list="fileList" accept="shp" :http-request="fileChange":auto-upload="true"><el-button slot="trigger" size="small" type="primary">上传文件</el-button></el-upload>
</template>
<style scoped></style>
效果展示:
