JS Mock 数据模拟与文件上传接收

在 JavaScript 中使用 Mock.js 模拟数据可以通过以下步骤实现:

1. 安装 Mock.js 库

npm install mockjs

2. 创建 Mock 数据

在 Mock 数据文件中，可以使用 Mock.js 提供的语法来创建模拟数据。例如:

import Mock from 'mockjs';

Mock.mock('/api/data', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1
  }]
});

上面的代码表示创建一个模拟数据，该数据的 URL 为 /api/data，返回的数据格式为:

{
  "list": [
    {
      "id": 1,
      "name": "张三",
      "age": 25
    },
    {
      "id": 2,
      "name": "李四",
      "age": 30
    },
    ...
  ]
}

其中，'list|1-10' 表示该数据的 list 属性是一个由 1-10 个元素组成的数组，每个元素包含 id、name、age 三个属性。'id|+1': 1 表示 id 属性从 1 开始，每次递增 1。'name': '@cname' 表示 name 属性是一个中文名字。'age|18-60': 1 表示 age 属性是一个 18-60 之间的整数。

3. 使用 Mock 数据

在需要使用 Mock 数据的地方，可以使用 axios 等 HTTP 库来请求数据。例如:

import axios from 'axios';
import Mock from 'mockjs';

axios.get('/api/data').then((res) => {
  console.log(res.data);
});

上面的代码表示发送一个 GET 请求，请求 URL 为 /api/data，获取到的数据将打印在控制台上。

至于如何接收上传的 txt 文件，则可以使用 HTML5 提供的 File API 来实现。例如:

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  const reader = new FileReader();
  
  reader.onload = (event) => {
    const content = event.target.result;
    console.log(content);
  };
  
  reader.readAsText(file);
});

上面的代码表示监听一个文件上传控件的 change 事件。当用户选择了一个文件后，将读取该文件的内容，并将读取到的内容打印在控制台上。

通过以上方法，即可在 JS 中使用 Mock 接收数据，接收上传的 txt 文件。