在Vue视图之间发送文件

Question

我正在编写一个Vue应用程序，我不知道从一个视图到另一个视图发送文件的最佳方式是什么。我有一个视图FileUploadView，允许您选择一个本地文件：

​

function selectFile() {
  this.file = this.$refs.file.files[0];
}

function sendFile() {

  const fileReader = new FileReader();
  try {
    fileReader.readAsText(this.file);
    fileReader.onloadend = function() {
      console.log(fileReader.result); // This are the contents of a file
      this.$router.push({
        name: '/textInput',
        params: {
          inputText: fileReader.result
        }
      });
    }
  } catch (err) {
    console.log(err)
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<input type="file" ref="file" id="fileUpload" class="form-control-file .form-control-lg" @change="selectFile" />
<button type="submit" class="btn btn-primary" /> Submit
</button>

​

当此视图加载文件时，我希望将用户重定向到TextInputView视图，并传递file.txt TextInputView的全部内容，该视图如下所示：

​

function onTextChange() {
  var inputText = document.getElementById("inputTextField").value;
  mock_send_data_to_server_and_return_results(inputText);
}

function mock_send_data_to_server_and_return_results(someText) {
  document.getElementById("outputTextAfterPostOnServer").innerText = someText.toUpperCase();

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">InputText</span>
        </div>
        <textarea id="inputTextField" class="form-control" aria-label="With textarea" onChange="onTextChange()"></textarea>
      </div>
    </div>
    <div class="col">
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Output text</h1>
          <p class="lead" id="outputTextAfterPostOnServer">Here the input text will be modified by backend, and returned.</p>
        </div>
      </div>
    </div>
  </div>

</div>

​

如果文件被传递，textarea元素应该包含原始文本，否则应该是空的。然后将此文本连同POST请求发送到DJANGO服务器，分析(更正)，并在相同的视图中返回给#outputTextAfterPostOnServer组件。

这个问题并不是关于将文本从TEXTAREA发送到#output...。

我想知道从FileUploadView发送短信到TextInputView.的正确方式是什么？现在我知道，我可以用VueRouter把它作为道具传递，但是这限制了我的文本到2048个字符。我如何将整个文本传递给TextInputView？我是否应该：

1. 使用vuex，
2. 在TextInputView中创建FileUploadView组件并显示它是否只选择了v-if文件？
3. 我是否应该将文件发送到后端，从后端撤回某种令牌，更改将令牌作为参数传递的视图，并使用令牌检索文本？
4. 其他方法。

我正在做的项目是这里。

Answer 1

这个链接可能对你有帮助。https://dev.to/alexmourer/sharing-data-between-components-invuejs-48me

如果您遇到任何问题，以这种方式共享数据，我喜欢Vuex选项。它们有不同类型的存储，它默认为本地存储，存储大约25 to。