vue3实现大文件上传

Vue3可以通过使用axios和FormData来实现大文件上传。

以下是一个简单的示例：

1. 在Vue3应用程序中安装axios：

npm install axios --save

2. 创建一个上传组件，在文件选择器中选择要上传的文件：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.selectedFile);
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(() => {
        console.log('文件上传成功');
      })
      .catch(() => {
        console.log('文件上传失败');
      });
    }
  }
}
</script>

3. 在服务器端使用Node.js和Multer中间件处理文件上传：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log('文件上传成功');
  res.send('文件上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

以上代码中，Multer中间件用于处理文件上传，并将文件保存到指定目录中。在上面的示例中，文件将被保存到`./uploads/`目录中。