如何在vue和node.js环境下使用multer实现图片的上传

要在 Vue 和 Node.js 环境下使用 Multer 实现图片上传，需要先安装 Multer。在 Node.js 端，可以使用以下命令进行安装：

npm install multer --save

在 Vue 端，可以使用以下命令进行安装：

npm install axios --save

接下来，需要在 Node.js 端创建一个 Multer 实例，用于处理上传的文件。可以使用以下代码：

const multer = require('multer');

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 })

上述代码中，`storage` 对象用于指定文件的存储路径和文件名。在本例中，将文件存储到 `uploads/` 文件夹下，并使用原始文件名作为文件名。

接下来，在 Node.js 端创建一个路由，用于处理图片上传请求。可以使用以下代码：

const express = require('express');
const router = express.Router();

router.post('/upload', upload.single('image'), (req, res) => {
  res.json({ image: req.file.filename });
});

module.exports = router;

上述代码中，`/upload` 路由用于处理图片上传请求。`upload.single('image')` 中的 `'image'` 参数指定上传的文件字段名。在上传成功后，返回上传的文件名。

在 Vue 端，可以使用 Axios 发送图片上传请求。可以使用以下代码：

const formData = new FormData();
formData.append('image', file);

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上述代码中，`formData` 对象用于存储上传的文件。在发送请求时，需要将 `Content-Type` 头设置为 `multipart/form-data`，以便服务器能够正确解析请求。

以上就是在 Vue 和 Node.js 环境下使用 Multer 实现图片上传的基本步骤。