Vue➕element ui ➕node ➕layui

这个技术栈可以用于开发 Web 应用程序。Vue 是一个流行的 JavaScript 框架，可以帮助您构建动态 Web 界面。Element UI 是一个基于 Vue 的 UI 框架，提供了许多可重用的 UI 组件，可以帮助您快速构建美观的界面。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以用于开发服务器端应用程序。Layui 是一款轻量级的前端 UI 框架，可以简化前端开发的工作。通过将这些技术栈结合起来，您可以快速构建出一个功能强大、美观的 Web 应用程序。

相关问题

用vue + element ui + node.js 写图片上传

首先需要安装依赖：

npm install vue element-ui axios express multer

其中，axios用于发送HTTP请求，express和multer用于处理后端的文件上传。

在前端Vue组件中，需要引入element-ui的Upload组件，并监听其change事件，当用户选择文件后，调用axios发送POST请求将文件上传到后端：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="http://localhost:3000/upload"
      :on-change="handleUpload"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">上传文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    handleUpload(file) {
      const formData = new FormData()
      formData.append('file', file.raw)
      axios.post('http://localhost:3000/upload', formData).then(() => {
        this.$message.success('上传成功')
      })
    }
  }
}
</script>

在后端Node.js中，需要使用multer中间件处理文件上传，并创建一个路由来处理上传请求：

const express = require('express')
const multer = require('multer')

const app = express()

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('上传成功')
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

其中，multer中间件可以根据配置的storage来处理文件存储和命名，上述例子中将文件存储在uploads文件夹中，并以时间戳和原始文件名的组合作为文件名。在路由中，使用upload.single('file')来指定只上传单个文件，且文件名为file。最后，将上传成功的状态返回给前端。

用vue + element ui + node 写一个图片上传并返回图片路径

以下是一个简单的Vue组件，使用Element UI中的Upload组件和Node.js的Express框架来实现图片上传并返回图片路径的功能。

前端代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :file-list="fileList"
      list-type="picture-card"
      :limit="1"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      imageUrl: '',
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.imageUrl = response.url;
      this.$emit('upload-success', this.imageUrl);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
  },
};
</script>

后端代码：

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, 'public/images');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  },
});

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  const url = `http://${req.headers.host}/images/${file.filename}`;
  res.json({ url });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在前端代码中，我们使用了Element UI中的Upload组件来实现图片上传的功能。其中，我们设置了上传路径、上传成功的回调函数、上传前的校验函数等。

在后端代码中，我们使用了Node.js的Express框架和multer中间件来处理文件上传。我们设置了文件存储路径和文件命名规则，并在上传完成后返回图片的访问路径。

最后，我们可以在Vue组件中监听`upload-success`事件来获取上传成功后返回的图片路径。