在 Vue 视图之间发送文件答案

【问题标题】：Send a File between Vue views在 Vue 视图之间发送文件
【发布时间】：2020-01-14 18:12:28
【问题描述】：

我正在编写一个 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？我应该：

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

我正在进行的项目是here。

【问题讨论】：

是否有需要将其发送到 TextInputView 的原因？ FileUploadView 可以轻松拥有文本区域，显示文件内容并将其发布到 django 服务器？还有一个原因是 TextInputView 只是一个普通的 javascript 而不是 vue？
TexInput 是纯 Javascript，因为我想展示“最小可复制示例”，但还没有时间在我的应用程序中编写此视图。 FileUploadView 可以有这个文本区域——这是个好主意。我专注于重用组件和简单性 - 并没有想到那个灵魂。谢谢！

标签： javascript html vue.js vue-component

【解决方案1】：

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

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

【讨论】：