vue+multer+express+jsonserver+element 实现上传图片并把图片存放到指定位置

要在Vue项目中使用`multer`、`express`和`json-server`来实现上传图片并将图片存放在指定位置，你可以按照以下步骤进行操作：

1. 在Vue项目的根目录下，创建一个新的文件夹，例如`server`，用于存放服务器端代码。

2. 在`server`文件夹中创建一个新的JavaScript文件，例如`server.js`，作为服务器端代码的入口文件。

3. 在`server.js`文件中使用以下代码来创建一个简单的Node.js服务器，并配置`multer`来处理文件上传：

   const express = require('express');
   const multer = require('multer');
   const path = require('path');
   const app = express();
   const upload = multer({ dest: 'uploads/' });

   // 处理静态资源
   app.use(express.static('public'));

   // 处理文件上传
   app.post('/upload', upload.single('file'), (req, res) => {
     const file = req.file;
     const filePath = path.join(__dirname, 'uploads', file.filename);
     // 这里可以对上传的文件进行进一步处理，例如存入数据库或移动到指定位置
     res.json({ message: 'File uploaded successfully' });
   });

   // 启动服务器
   app.listen(3000, () => {
     console.log('Server is running on http://localhost:3000');
   });

4. 在Vue项目的根目录下，打开命令行，并进入`server`文件夹。

5. 在命令行中运行以下命令来安装所需的依赖：

   npm install express multer

6. 在Vue项目的根目录下创建一个新的文件夹，例如`public`，用于存放静态资源。

7. 在Vue项目中使用`element-ui`或其他组件库，创建一个包含文件上传功能的组件。以下是一个示例：

   <template>
     <div>
       <input type="file" @change="handleFileChange" />
       <button @click="uploadFile">Upload</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         file: null,
       };
     },
     methods: {
       handleFileChange(event) {
         this.file = event.target.files[0];
       },
       uploadFile() {
         const formData = new FormData();
         formData.append('file', this.file);

         fetch('http://localhost:3000/upload', {
           method: 'POST',
           body: formData,
         })
           .then((response) => response.json())
           .then((data) => {
             console.log(data.message);
           })
           .catch((error) => {
             console.error('Error:', error);
           });
       },
     },
   };
   </script>

在上述代码中，我们创建了一个包含文件上传功能的组件。当用户选择文件后，通过`FormData`对象将文件添加到请求体中，并使用`fetch`发送POST请求到服务器的`/upload`路由。

8. 运行Vue项目，并访问包含文件上传组件的页面。选择一个文件并点击上传按钮，服务器将会接收到文件并将其存放在指定位置。

注意：在示例中，我们将上传的文件存放在`uploads`文件夹中。你可以根据需要修改存放位置和其他配置。另外，确保在Vue组件中的请求URL匹配服务器的地址和端口。