input file文件上传

Vue中实现文件上传可以使用HTML5的File API，具体步骤如下：

1. 在模板中添加一个input标签，type为file，用于选择文件：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

2. 在Vue实例中定义一个方法，用于处理文件上传：

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[];
      // 处理文件上传逻辑
    }
  }
}
</script>

3. 在handleFileUpload方法中，可以使用FormData对象将文件上传到服务器：

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[];
      const formData = new FormData();
      formData.append('file', file);
      // 发送文件上传请求
      axios.post('/upload', formData).then(response => {
        // 处理上传成功的逻辑
      }).catch(error => {
        // 处理上传失败的逻辑
      });
    }
  }
}
</script>

4. 在服务器端接收文件上传请求，可以使用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('/upload', upload.single('file'), (req, res) => {
  // 处理文件上传成功的逻辑
});

以上就是Vue中实现文件上传的基本步骤。