在 Vue Js 中从 url 中获取文件内容到字符串中

Question

我现在正在接触 vue js。目前我正在尝试从外部文件（来自另一台服务器，来自url）获取数据到一个字符串中以将其解析为一个数组。但是我已经失败了文件到字符串部分。我尝试使用：

export default {
data() {
    return {
      lines: [],
      error: '',
      choice: '',
      content: ''
    }
async created() {
    try{
      parseFile();
    }
    catch(err){
      this.error = err.message;
    }
methods: {
    async parseFile() {
      fetch('https://filesamples.com/samples/document/txt/sample3.txt')
        .then(response => response.text())
        .then(data => {console.log(data); this.content = data;});
    }
  }
}

我想将其作为字符串存储到内容中，以便稍后将其拆分到行数组中。

遗憾的是它甚至没有加载，我在控制台中总是什么也得不到。为什么会这样？我在这里发现您可以使用 raw-loader（或者我现在认为的资产模块）将原始文件导入 vue。但我的目的不是将原始文件导入 App.vue 以加载它。有没有人有想法，为什么这对我不起作用？我不是很习惯JavaScript，可能是我比较笨吧，哈哈

此致

Answer 1

您的代码没有任何问题，您正在使用 promise 链来获取提取结果，但是您在未捕获的请求中收到 CORS 错误。

我已经更改了代码的格式并添加了一个额外的 try catch 你会看到 'error in fetch' 记录到控制台。

async parseFile() {
   try {
     const fetchResponse = await fetch(
       "https://filesamples.com/samples/document/txt/sample3.txt"
     );
     console.log(fetchResponse.text());
   } catch (ex) {
     console.log("Error in fetch");
   }
}

https://codepen.io/DanielRivers/pen/qBVpZOo

在 Vue Js 中从 url 中获取文件内容到字符串中

Fetch file content into string from url in Vue Js

javascript

file

fetch

vue.js