在Vue中使用element-ui的上传组件上传图片到后端

1. 安装element-ui和axios

npm install element-ui axios

2. 在main.js中引入element-ui和axios

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

Vue.use(ElementUI)
Vue.prototype.$axios = axios

3. 在组件中使用el-upload组件

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :headers="{Authorization: token}">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

其中，action是上传的接口地址，on-success是上传成功后的回调函数，before-upload是上传前的钩子函数，headers是请求头部，可以传递token等信息。

4. 在methods中定义handleSuccess和beforeUpload函数

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
  }
}

在beforeUpload函数中，可以对上传的图片进行格式、大小等限制。

5. 在后端接口中处理上传的图片

在后端接口中，可以使用express框架的multer中间件来处理上传的图片。安装multer：

npm install multer

在express中引入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() + '.jpg')
  }
})

const upload = multer({ storage: storage })

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  // 在这里处理上传成功后的响应数据
})

在这里，上传的文件会被保存到uploads文件夹下，文件名会以字段名和时间戳命名。

注意：在使用express中间件处理上传文件时，需要使用body-parser中间件。安装body-parser：

npm install body-parser

在express中引入body-parser：

const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

完整代码如下：

const express = require('express')
const multer = require('multer')
const bodyParser = require('body-parser')

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() + '.jpg')
  }
})

const upload = multer({ storage: storage })

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  // 在这里处理上传成功后的响应数据
})

app.listen(3000, () => console.log('Server is running...'))

注意：在使用element-ui的上传组件时，需要设置上传的文件类型和大小限制，但是这只是客户端的限制，如果后端没有做相应的处理，仍然可以上传非指定类型和大小的文件，因此，在后端接口中也需要对上传的文件进行相应的限制。