vue中如何实现上传文件

在Vue中，可以通过以下步骤实现上传文件：

1. 安装`axios`和`vue-axios`插件，用于发送请求和处理响应。

npm install axios vue-axios --save

2. 创建一个文件上传组件。

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

<script>
import axios from 'axios';
import VueAxios from 'vue-axios';

export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('/api/upload', formData)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    Vue.use(VueAxios, axios);
  }
}
</script>

3. 在后端服务中处理文件上传请求，并返回响应。

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

const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server started on port 3000'));

以上就是Vue中实现文件上传的基本步骤，需要注意的是，上传文件的大小和类型需要在前端和后端都进行限制和校验，以保证系统的安全和稳定。