图片上传 基于element-ui upload组件 + NodeJS koa2框架搭建

项目所需

vue 3.0

element-ui

axios

nodejs + koa2

mysql + sequelize

koa-multer 中间件

项目地址

https://github.com/chenfalse/uploadImage

ps: 大家可以下载下来看一下，如果可以的话记得点一个star，谢谢大家！

项目展示

功能描述

1.图片上传，并且图片信息入库，刷新页面取最新上传的一条数据

2.列表展示上传图片信息

3.分页

核心功能实现

upload 中间件的实现 需要用到koa-multer

/**
 * @description 文件上传
 * @author 陈佳兵
 */

const multer = require('koa-multer')
const path = require('path')

//配置
var storage = multer.diskStorage({
  //文件保存路径
  destination: function (req, file, cb) {
      cb(null, 'upload-server/src/public/images/')//path.resolve('public/phoneManageSystem')
  },
  //修改文件名称
  filename: function (req, file, cb) {
      var fileFormat = (file.originalname).split(".");  //以点分割成数组，数组的最后一项就是后缀名
      cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
})
//加载配置
var upload = multer({
   storage: storage
})

module.exports = upload
           

路由的实现

const router = require('koa-router')()
const upload = require('../utils/upload')
const { getFileInfo, getFileList } = require('../controller/file')

router.post('/api/uploadImage', upload.single('file'), async (ctx, next) => {
  const {
    destination,
    filename,
    path,
    size,
    mimetype 
  } = ctx.req.file

  ctx.body = await getFileInfo({
    destination,
    filename,
    path,
    size,
    mimetype 
  })
})
           

前端实现

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="/api/uploadImage"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="require('../../../upload-server/src/public/images/'+ imageUrl)" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  props: {
    imageUrl: {
      type: String
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = ""
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$emit('handleMounted')
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

           

项目地址

uploadImage 图片下载

如果可以的话希望大家star一下，谢谢大家！！！

注意

因为是本地数据库，下载下来的项目sequelize的实例记得改成自己的数据库地址！