vue中将shp文件上传并读取

1，安装shpjs 并引用

cnpm install shpjs --s

import shp from "shpjs"

2，使用elementui控件上传shp.zip

<el-upload
                    drag
                    class="fileChoice"
                    :auto-upload=false
                    :show-file-list="false"
                    action=""
                    accept="shp"
                    :on-change="parsingShape"
                >
                <img type="file" alt @click="parsingShape"/>
              </el-upload>

methods: {
  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){
                  console.log(this.result)
                  shp(this.result).then(
                      function(data){
                          console.log(data)
                      }).catch(function(){
                      _self.$message.warning(_self.$t('common.message.fileFormat'));
                  });
              }
          }
      }
    }
}

3，解析的数据格式

image.png