vue+Express+express-fileupload+jsonserver+element实现图片上传，并存放到指定位置

你可以使用Vue、Express、express-fileupload、jsonserver和Element UI来实现图片上传，并将其存放到指定位置。下面是一个简单的步骤指南：

1. 在Vue项目中安装Element UI组件库：

npm install element-ui

2. 创建一个Vue组件，用于实现图片上传的功能。你可以使用Element UI的上传组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :file-list="fileList"
      multiple
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      // 在上传之前的操作，比如限制文件类型和大小
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的操作
    }
  }
};
</script>

3. 在Express项目中安装express-fileupload和jsonserver：

npm install express-fileupload jsonserver

4. 创建一个Express路由，用于处理图片上传的请求：

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// 启用express-fileupload中间件
app.use(fileUpload());

// 处理图片上传的请求
app.post('/api/upload', (req, res) => {
  if (!req.files) {
    return res.status(400).send('No files were uploaded.');
  }

  // 获取上传的文件
  const sampleFile = req.files.sampleFile;

  // 将文件保存到指定位置
  sampleFile.mv('/path/to/save/' + sampleFile.name, (err) => {
    if (err) {
      return res.status(500).send(err);
    }

    // 返回上传成功的信息
    res.send('File uploaded!');
  });
});

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

5. 启动jsonserver，用于模拟数据的请求和响应：

json-server --watch db.json --port 4000

6. 创建一个db.json文件，用于存储上传成功的图片信息：

{
  "images": []
}

现在，你就可以在Vue应用中使用这个上传组件，并将上传成功的图片信息存储到db.json文件中了。记得将图片保存路径修改为你想要存放的指定位置。