如何在Node.js中用Vue.js实现标题、名称、图片、image2等字段的文件上传

<template>
  <div>
    <input type="text" v-model="title" placeholder="标题">
    <input type="text" v-model="name" placeholder="名称">
    <input type="file" @change="handleFileUpload" accept="image/*">
    <input type="file" @change="handleFileUpload2" accept="image/*">
    <button @click="upload">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      name: '',
      file: null,
      file2: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    handleFileUpload2(event) {
      this.file2 = event.target.files[0];
    },
    upload() {
      // 在这里编写文件上传的逻辑
    }
  }
};
</script>

npm install 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) => {
  // 在这里处理文件上传的逻辑，可以通过req.file获取上传的文件信息
  // 可以将文件信息保存到数据库或者进行其他操作
  res.send('文件上传成功');
});

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

npm install axios

import axios from 'axios';

export default {
  // ...
  methods: {
    upload() {
      const formData = new FormData();
      formData.append('title', this.title);
      formData.append('name', this.name);
      formData.append('file', this.file);
      formData.append('file2', this.file2);

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
          // 文件上传成功后的处理逻辑
        })
        .catch(error => {
          console.error(error);
          // 文件上传失败后的处理逻辑
        });
    }
  }
};