vue实现上传文件

在 Vue 中实现上传文件可以使用 HTML5 的 FormData 对象和 XMLHttpRequest 对象，具体步骤如下：

1. 在模板中添加一个文件上传 input 标签，并设置 multiple 属性，让用户能够上传多个文件：

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleUpload">
  </div>
</template>

2. 在 Vue 实例中编写 handleUpload 方法，通过 FormData 对象将文件添加到请求中，并通过 XMLHttpRequest 对象发送上传请求：

export default {
  methods: {
    handleUpload() {
      const files = this.$refs.fileInput.files;
      const formData = new FormData();

      // 将文件添加到FormData对象中
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        formData.append('files', file);
      }

      // 发送上传请求
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');
      xhr.onload = () => {
        console.log(xhr.responseText);
      };
      xhr.send(formData);
    }
  }
}

3. 在后端代码中处理文件上传请求，将上传的文件保存到服务器上。

需要注意的是，在实际使用中需要进行文件类型和大小的限制，防止上传恶意文件或者上传过大的文件导致服务器崩溃。