前台解析本地shape文件

先引入解析包npm install shpjs --save

然后使用element_ui的文件上传组件

                    <el-upload
                        drag
                        class="fileChoice"
                        :auto-upload=false
                        :show-file-list="false"
                        action=""
                        :on-change="parsingShape"
                    >
                    <img type="file" src="./theme/img/Group 8 Copy 3.png" alt @click="parsingShape"/>
                    </el-upload>

img为自定义的小图标，随意换。:auto-upload设置为false不上传。:on-change="parsingShape"为文件上传之后的回调

        parsingShape(files, fileList){
            let _self=this;
            if(fileList){
                this.file=fileList[fileList.length-1]
                const name=this.file.name
                const extension=name.split('.')[1]
                if('zip'!==extension){
                    this.$message.warning(this.$t('common.message.isNotFile'));
                }else {
                    const reader=new FileReader()
                    const  fileData=this.file.raw
                    reader.readAsArrayBuffer(fileData)
                    reader.onload = function(e){
                        shp(this.result).then(
                            function(data){
                                console.log(data)
                            }).catch(function(){
                            _self.$message.warning(_self.$t('common.message.fileFormat'));
                        });
                    }
                }
            }
        }

以上是js代码，可获得最后解析之后的geoJson数据。

注意：此方法只能解析zip文件。以下图片问zip压缩包里的文件

 

 

转载于:https://www.cnblogs.com/smlPig/p/11551221.html