ElementUI 文件上传组件实现教程 - 详细步骤及代码示例 - 常规

ElementUI 提供了 el-upload 组件来实现文件上传功能。

引入 ElementUI 组件库

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

Vue.use(ElementUI)

使用 el-upload 组件

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

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
    }
  }
}
</script>

属性说明

action：上传文件的接口地址
on-success：上传成功后的回调函数
headers：上传文件时需要携带的请求头信息
slot="tip"：自定义提示信息

上传文件接口实现

可以使用任何后端框架实现文件上传接口，以下是一个基于 Node.js 的示例：

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.originalname)
  }
})

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 500000 // 限制文件大小为500kb
  },
  fileFilter: function (req, file, cb) {
    if (file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/png') {
      cb(new Error('只允许上传jpg和png格式的图片！'))
    } else {
      cb(null, true)
    }
  }
})

app.post('/upload', upload.single('file'), function (req, res, next) {
  res.send({ code: 200, message: '上传成功！' })
})

app.listen(3000, function () {
  console.log('Server is listening on port 3000!')
})