用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。最后，将上传成功的状态返回给前端。