vue node elementui上传图片

### 回答1：
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。Node是一个基于JavaScript的运行时环境，用于在服务器端运行JavaScript代码。ElementUI是一个基于Vue的UI组件库，提供了丰富的UI组件和交互效果。

要实现上传图片功能，可以使用Vue和ElementUI提供的组件和方法。首先需要在Vue中引入ElementUI组件库，然后使用el-upload组件来实现文件上传功能。在Node中，可以使用multer中间件来处理文件上传请求，将上传的文件保存到服务器上的指定目录中。

具体实现步骤如下：

1. 在Vue中引入ElementUI组件库

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 在Vue模板中使用el-upload组件

<el-upload
  class="upload-demo"
  action="/upload"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

3. 在Vue组件中定义上传文件的相关方法

export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt500K = file.size / 1024 < 500

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isJPG && isLt500K
    },
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}

4. 在Node中使用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, file.fieldname + '-' + Date.now())
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), function (req, res, next) {
  const file = req.file
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
  res.send(file)
})

以上就是使用Vue、Node和ElementUI实现上传图片功能的基本步骤。需要注意的是，上传文件时需要设置文件类型和大小的限制，以及在Node中设置文件上传的存储路径和文件名。

### 回答2：
Vue是一个流行的开源JavaScript框架，可用于构建灵活的用户界面。Node.js则是一种基于Chrome V8 JavaScript引擎构建的轻量级JavaScript运行时。ElementUI则是一套基于Vue.js 2.0的UI框架，其中包括诸如按钮，表格，上传等组件。在本文中，我们将探讨如何使用Vue和Node.js与ElementUI上传图片。

首先，我们需要使用ElementUI一个名为“el-upload”的组件。这个组件可以轻松实现文件上传。在Vue组件中加入如下代码：

<template>
  <el-upload
    class="upload-demo"
    action="//dev-server/file/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

在上面的代码中，我们可以看到action属性指向一个上传URL。在这个URL中，我们需要使用Node.js编写一个接口来处理上传的文件。在我们的Node.js服务器上，这个接口看起来像这样：

const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
const upload = multer({
  dest: path.join(__dirname, '/uploads/')
})
app.post('/file/upload', upload.single('avatar'), function(req, res) {
  // req.file是上传的文件
  console.log(req.file)
})
app.listen(3000, function() {
  console.log('listening on port 3000')
})

在上面的Node.js代码中，我们首先引入了express和multer模块。Multer模块是一个Node.js中间件，用于处理multipart/form-data类型的数据（即文件上传）。

接下来，我们定义了一个上传路径，这个路径是使用multer的destination选项来指定的。然后，我们使用multer的single函数来处理单个文件的上传请求。

最后，我们在端口3000上启动服务器，监听上传请求。当上传文件时，我们将在控制台中打印出上传文件的信息。这个接口的功能很简单，在实际的环境中需要更加完善。

最后是实现上传文件只能是图片的方式，我们还要在ElementUI组件的beforeUpload方法中判断、处理：

beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
    return false
  }
}

在这个方法中，我们检查要上传的文件是否是JPG或PNG格式，如果不是就返回一个错误提示信息。另外，我们也做了一个文件大小的限制，上传的文件不能超过2MB。

综上所述，Vue、Node.js和ElementUI组合使用是上传图片的最佳方式。如果您需要一个简单，易于维护和扩展的上传图片的方案，这种组合是很适合的。

### 回答3：
Vue是一款流行的前端JavaScript框架，Node.js是一款流行的后端JavaScript框架，ElementUI是一款流行的Vue UI库，可以用来构建漂亮的Web界面。要在Vue Node ElementUI中实现上传图片，需要以下步骤：

1.引入ElementUI组件和axios库

首先，在Vue组件中引入ElementUI的Upload组件和axios库，用于发送HTTP请求。可以在组件的script标签中通过import引入：

import { Upload } from 'element-ui'
import axios from 'axios'

2.使用Upload组件

然后，在Vue组件的template标签中使用Upload组件，设置props属性和事件监听器。上传图片后，可以通过事件监听器中的回调函数获取上传的文件信息，并将该信息发送到后端服务器。以下是一个基本的Upload组件示例：

<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，action指定了上传文件的目的地，show-file-list设置为false表示不显示已经上传的文件，on-success是上传成功后的回调函数。

3.实现handleSuccess函数

最后，实现handleSuccess函数，将上传成功后的文件信息发送到后端服务器。可以使用axios库中的post方法，将文件信息以FormData的形式发送到服务器：

handleSuccess(response, file, fileList) {
let formData = new FormData()
formData.append('file', file)
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}

这里将上传的文件信息放到FormData对象中，并设置Content-Type头部信息为multipart/form-data，以确保正确处理文件上传。

以上就是在Vue Node ElementUI中实现上传图片的基本步骤。根据具体场景的需求，可能还需要进行一些额外的设置或修改。