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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容