vue3 读写文件方法

在Vue3中，可以使用原生的JavaScript方法来读写文件。具体来说，可以使用FileReader对象来读取文件内容，使用XMLHttpRequest对象或fetch API来发送HTTP请求并将文件内容发送到服务器。

以下是一个使用FileReader对象读取文件内容的示例：

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

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    console.log(event.target.result);
  };

  reader.readAsText(file);
});

这个示例中，我们首先获取了一个文件输入框的引用，然后监听其change事件。当用户选择了一个文件后，我们获取该文件的引用，并创建一个FileReader对象。接着，我们将该文件的内容读取为文本，并在onload回调函数中打印出来。

如果要将文件内容发送到服务器，可以使用XMLHttpRequest对象或fetch API。以下是一个使用XMLHttpRequest对象将文件内容发送到服务器的示例：

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

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const formData = new FormData();

  formData.append('file', file);

  xhr.open('POST', '/upload');
  xhr.send(formData);
});

在这个示例中，我们首先创建了一个XMLHttpRequest对象，并监听其readystatechange事件。当该事件被触发时，我们检查XMLHttpRequest对象的readyState属性和status属性，以确定请求是否成功。接着，我们获取用户选择的文件，并创建一个FormData对象，将该文件添加到其中。最后，我们使用XMLHttpRequest对象将FormData对象发送到服务器。