vue前后端不分离怎么实现上传图片到指定文件夹

如果你的Vue应用和后端应用不分离，那么上传图片到指定文件夹的实现方式与前后端分离的方式类似，只是在前端部分处理上传的数据时需要注意一些细节。

下面是一个简单的示例代码，演示了如何在Vue应用中上传图片到指定文件夹：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile() {
      const fileInput = this.$refs.fileInput;
      const file = fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      fetch('/upload', {
        method: 'POST',
        body: formData
      }).then(response => {
        console.log('File uploaded successfully!');
      }).catch(error => {
        console.error('Error uploading file: ', error);
      });
    }
  }
}
</script>

在上述代码中，我们首先在Vue组件中添加了一个文件选择框，并监听了其change事件。当用户选择了一个文件后，我们通过FormData对象将其包装为表单数据，然后使用fetch API将其发送到后端应用的/upload接口。

后端应用的代码如下所示：

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, './uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});

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

app.post('/upload', upload.single('file'), function(req, res) {
  res.send('File uploaded successfully!');
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

在上述代码中，我们使用了multer库来处理上传的文件。具体来说，我们首先定义了一个存储引擎（diskStorage），将上传的文件保存到./uploads文件夹中，并使用文件的原始名称作为文件名。然后，我们创建了一个multer中间件，并将其应用到/upload路由上。最后，我们在/upload路由的处理函数中返回一个简单的响应，告诉客户端文件已经上传成功。

请注意，在上述示例代码中，我们将上传的文件保存到了./uploads文件夹中，你可以根据需要修改为自己想要保存的文件夹路径。另外，由于我们使用了multer库来处理上传的文件，因此需要在项目中安装该库：`npm install multer`。