vue element上传文件下载文件

<template>
    <div id="lineDataToPonit">
        <h3>GeoJson数据转化:</h3>
        <el-upload class="upload-demo" ref="upload" drag action="false" :on-change="fileChange" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="handleSuccess" :on-progress='progress' :http-request='httpRequest'
            :limit="2" :file-list="fileList" :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
        <div class="btnCss" v-if="fileList.length > 0">
            <el-button @click="changeLineDataToPonitPole">线数据Pole转起点点数据+旋转角度</el-button>
            <el-button @click="changeLineDataToPonitCamera">线数据Camera转中点点数据+旋转角度</el-button>
            <el-button @click="downLoadData" type="primary"  v-if="this.pointDataObj">下载</el-button>
        </div>
        <div>
            <pre>
                {{ this.pointDataObj }}
            </pre>
        </div>
    </div>
</template>
  
<script>
import * as turf from "@turf/turf";
let geojsonData = null
export default {
    name: "lineDataToPonit",
    data() {
        return {
            fileList: [],
            pointDataObj:null,
            geojsonName: ""
        }
    },
    mounted() {

    },
    methods: {
        fileChange(file,
            fileList) {
            this.errorFile = [];
            this.fileList = []
            this.fileList = fileList;
            console.log(file, fileList, 'fileChange-----');
            this.geojsonName = file.name
            this.handleFileToJson(file.raw)
        },
        handleFileToJson(file) {
            try {
                const reader = new FileReader();
                reader.onload = (event) => {
                    const contents = event.target.result;
                    const jsonContent = JSON.parse(contents);
                    geojsonData = jsonContent
                    // 在这里对读取到的JSON内容进行处理
                    console.log(jsonContent, 'jsonContent');
                };
                reader.readAsText(file);
            } catch (error) {
                console.log(error);
            }
        },
        // 杆数据
        changeLineDataToPonitPole() {
            if (geojsonData) {
                let pointData = JSON.parse(JSON.stringify(geojsonData))
                let features = geojsonData.features;
                for (let i = 0; i < features.length; i++) {
                    let lineArr = features[i].geometry.coordinates[0];
                    let Heading = this.getHeadingByLineAlong(lineArr);
                    
                    var from = turf.point(lineArr[0]);
                    var to = turf.point(lineArr[1]);
                    var options = {units: 'metres'};
                    var distance = turf.distance(from, to, options);

                    pointData.features[i].properties.distanceMetres = distance
                    pointData.features[i].geometry.coordinates = [lineArr[0][0], lineArr[0][1]]
                    pointData.features[i].geometry.type = "Point"
                    let rotition = Heading * (180 / Math.PI);
                    pointData.features[i].properties.rotition = rotition

                }
                // console.log(geojsonData, 'geojsonData');
                this.pointDataObj = pointData
                console.log(pointData, 'pointData');
            }
        },
        // 摄像头
        changeLineDataToPonitCamera(){
            if (geojsonData) {
                let pointData = JSON.parse(JSON.stringify(geojsonData))
                let features = geojsonData.features;
                for (let i = 0; i < features.length; i++) {
                    let lineArr = features[i].geometry.coordinates[0];
                    let Heading = this.getHeadingByLineAlong(lineArr);
                    
                    let lineString = turf.lineString(lineArr);
                    let lineCenter = turf.center(lineString);
                    let lineCenterArr = lineCenter.geometry.coordinates;
                    console.log(lineCenterArr,'lineCenterArr');
                    pointData.features[i].geometry.coordinates = lineCenterArr
                    pointData.features[i].geometry.type = "Point"
                    let rotition = Heading * (180 / Math.PI);
                    pointData.features[i].properties.rotition = rotition

                }
                // console.log(geojsonData, 'geojsonData');
                this.pointDataObj = pointData
                console.log(pointData, 'pointData');
            }
        },
        downLoadData(){
            if (this.pointDataObj) {
                let content = JSON.stringify(this.pointDataObj, null, 4);
                let blob = new Blob([content], { type: "text/plain;charset=utf-8" });
                // window.saveAs(blob, "HDLayerUrlArrAll.json");
                let downloadElement = document.createElement('a')//创建一个a 虚拟标签
                let href = window.URL.createObjectURL(blob) // 创建下载的链接
                // window.open(href)//浏览器打开
                downloadElement.href = href
                downloadElement.download = this.geojsonName
                document.body.appendChild(downloadElement)
                downloadElement.click() // 点击下载
                document.body.removeChild(downloadElement) // 下载完成移除元素
                window.URL.revokeObjectURL(href)//释放blob链接资源
            }
        },
        getHeadingByLineAlong(lineCoordinates) {
            //"coordinates":[[116.74435282,40.19927723,0],[116.74435272,40.19925024,0]]
            let point1 = turf.point(lineCoordinates[0]);
            let point2 = turf.point(lineCoordinates[1]);
            let bearing = turf.bearing(point2, point1);
            // console.log("bearing:",bearing);
            let angle = bearing;
            let Heading = angle / 180 * Math.PI;
            return Heading;

        },

        handleRemove(file, fileList) {
            console.log(file, fileList, 'handleRemove-----');
        },
        handlePreview(file) {
            console.log(file, 'handlePreview-----');
        },
        handleSuccess(file, fileList) {
            console.log(file, fileList, 'handleSuccess-----');
        },
        progress(file, fileList) {
            console.log(file, fileList, 'progress-----');
        },
        httpRequest() {
        },
    }
}
</script>
  
<style>
#lineDataToPonit {
    position: fixed;
    padding: 10px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.99);
    left: 0;
    top: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    /* justify-content: center;
  align-items: center; */
}

.upload-demo {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    margin-top: 20px;
    border: 2px dashed #bbb;
    border-radius: 5px;
    padding: 20px;
    cursor: pointer;
}

.btnCss {
    margin-top: 10px;
}

.el-icon-upload {
    font-size: 36px;
    color: #ccc;
}

.el-upload__text {
    margin-top: 10px;
    color: #999;
}

.el-upload__tip {
    margin-top: 10px;
    color: #999;
}

.el-upload-list {
    margin-top: 20px;
}

.el-progress {
    width: 100%;
    margin-top: 10px;
}
</style>