vue上传图片到项目目录下

在 Vue 中上传图片到项目目录下，需要使用后端服务器提供的接口来处理上传文件的请求。下面是一个简单的实现流程：

1. 在 Vue 组件中创建一个 input 标签，并设置 type 属性为 file：

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

2. 在 Vue 组件中定义一个方法来处理上传图片的请求：

methods: {
  uploadImage(event) {
    const formData = new FormData();
    formData.append('file', event.target.files[0]);
    axios.post('/api/upload', formData).then(response => {
      console.log(response.data);
    });
  }
}

3. 在后端服务器中实现上传文件的接口：

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

const app = express();

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

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.send(req.file.path);
});

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

在上面的代码中，我们使用 multer 中间件来处理上传文件的请求，并将文件保存在项目的 public/uploads 目录下。上传成功后，服务器会返回文件的路径，我们可以在前端页面中显示该图片：

<template>
  <div>
    <input type="file" @change="uploadImage">
    <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    uploadImage(event) {
      const formData = new FormData();
      formData.append('file', event.target.files[0]);
      axios.post('/api/upload', formData).then(response => {
        this.imageUrl = response.data;
      });
    }
  }
}
</script>

在上面的代码中，我们使用 v-if 指令来判断图片是否上传成功，如果成功则显示图片。