为了账号安全,请及时绑定邮箱和手机立即绑定

在 Vue 视图之间发送文件

在 Vue 视图之间发送文件

月关宝盒 2021-10-14 16:43:25
我正在编写一个 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();}textarea如果传递,该元素应包含文件的原始文本,否则为空。然后,此文本将与 POST 请求一起发送到 DJANGO 服务器,进行分析(更正)并在同一视图中返回给#outputTextAfterPostOnServer组件。这个问题不是关于从TEXTAREAto发送文本#output...。我想知道将文本从FileUploadView发送到TextInputView的正确方法是什么。现在我知道,我可以将它作为 VueRouter 的道具传递,但这将我的文本限制为 2048 个字符。如何将整个文本传递给 TextInputView?我是不是该:使用 vuex,在 FileUploadView 中创建 TextInputView 组件并仅显示 v-if 文件已被选中?我应该在后端发送文件,从后端检索某种令牌,更改将令牌作为参数传递的视图并使用令牌检索文本?其他一些方法。我正在做的项目在这里。
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 172 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信