时间戳

首页 > 解决方案 > 使用 JS/VueJS 将 XML 文件转换为字符串（将其发送到后端服务器）

xml - 使用 JS/VueJS 将 XML 文件转换为字符串（将其发送到后端服务器）

问题描述

我需要将上传的 .xml 文件转换为字符串并将其发送到后端服务器。换句话说，我需要保留原始的“外观”-例如：<process.end.date>20100131</process.end.date>因此标签必须保留并像那样发送。如何转换文件？

上传XML.vue 

<template>
  <fieldset class="buttons">
    <span class="logInBTN" v-on:click="send(xml)">Send</span>
  </fieldset>
  <br>
  <div class="mainContainer">
    <table border="0px">
      <tr>
        <td>
          <label>Upload file: </label>
          <input id="fileInput" type="file" @change="handleUpload" accept=".xml"/>
        </td>
      </tr>
    </table>
  </div>
</div>
</template>


<script>
  import config from '../main.js'

  export default {
    data(){
      return {
        xml: ''
      }
    },
    methods:{
      send(xml){
        console.log("Result1:\n\n" + this.xml);
        const url = this.$session.get('apiUrl') + 'manualReceive'
        this.submit('post',url, xml);
      },
      submit(requestType, url, submitData) {
        this.$http[requestType](url, submitData)
          .then(response => {
          console.log("manualReceive " + response.data);
        if(response.data == true)
          alert('Successful Sent!');
        else
          alert('Problem with sending message!');
      })
      .catch(error => {
          console.log('error:' + error);
      });
      },
      handleUpload: function(){
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var reader = new FileReader();
        reader.addEventListener('load', function(){
          this.xml = reader.result;
          console.log("Result:\n\n" + this.xml);
        });
        this.xml = reader.readAsText(file);
      }
    }
  }
</script>

更新： 我意识到 xml 是字符串格式的。现在我知道问题出在哪里了——当我console.log("Result1:\n\n" + this.xml);在 send(xml) 函数中写入时，它是未定义的。虽然console.log("Result:\n\n" + this.xml);工作正常我该如何解决这个问题？

更新2：

<script>
  import config from '../main.js'

  export default {
    data(){
      return {
        xml: ''
      }
    },
    methods:{
      send(){
        /*console.log("Result2:\n\n" + this.xml);*/
        const url = this.$session.get('apiUrl') + 'manualReceive'
        this.submit('post',
          url,
          this.xml
        );
      },
      submit(requestType, url, submitData) {
        this.$http[requestType](url, submitData)
          .then(response => {
          console.log("manualReceive " + response.data);
        if(response.data == true)
          alert('Успешно изпратено съобщение към CDCO!');
        else
          alert('Проблем при изпращането на съобщението!');
      })
      .catch(error => {
          console.log('error:' + error);
      });
      },
      handleUpload: function(){
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var reader = new FileReader();
        var self = this;
        reader.addEventListener('load', function(){
          self.xml = reader.result;
          /*console.log("Result1:\n\n" + self.xml);*/
        });
        reader.readAsText(file);
      }
    }
  }
</script>

标签： xmlstringvue.js

解决方案

您不需要传递xml给send函数，因为您的xml字符串是 Vue 实例的属性。将功能更改send为：

send(){
    const url = this.$session.get('apiUrl') + 'manualReceive'
    this.submit('post',url, this.xml);
}

在模板中：

<span class="logInBTN" v-on:click="send">Send</span>

更新

此外，您不需要this.xml在此行中分配：

this.xml = reader.readAsText(file);

只需使用：

reader.readAsText(file);

更新 2

function您在“加载”事件的函数声明中使用单词，因此this变量是 FileReader。您应该存储正确this或使用箭头函数：

var self = this;
reader.addEventListener('load', function(){
      self.xml = reader.result;
      console.log("Result:\n\n" + self.xml);
    });

然后this.xml将在发送功能中工作。

推荐阅读