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

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

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

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

3. 在`server.js`文件中使用以下代码来创建一个简单的Node.js服务器，并配置`json-server`来模拟RESTful API：

   const express = require('express');
   const jsonServer = require('json-server');
   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' });
   });

   // 使用json-server创建RESTful API
   const router = jsonServer.router('db.json');
   app.use('/api', router);

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

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

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

   npm install express json-server multer

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

   <template>
     <div>
       <el-upload
         class="upload-demo"
         action="http://localhost:3000/upload"
         :on-success="handleSuccess"
         :before-upload="beforeUpload"
       >
         <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
     </div>
   </template>

   <script>
   export default {
     methods: {
       handleSuccess(response, file) {
         console.log(response);
         // 文件上传成功后的逻辑
       },
       beforeUpload(file) {
         // 可以在此处添加一些文件上传前的逻辑，例如限制文件大小、类型等
       },
     },
   };
   </script>

在上述代码中，我们使用了`el-upload`组件来实现文件上传功能。通过设置`action`属性为服务器的上传路由（`http://localhost:3000/upload`），并通过`on-success`属性监听文件上传成功的事件，你可以在`handleSuccess`方法中处理上传完成后的逻辑。

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

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