vue3 ant-design-vue 封装上传图片组件

最新推荐文章于 2025-03-26 11:17:47 发布

资深前端之路

最新推荐文章于 2025-03-26 11:17:47 发布

阅读量1.3k

点赞数 24

分类专栏：学习技术成长文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44565776/article/details/139008996

版权

嗨，我是小路。今天主要和大家分享的主题是“vue3 封装上传图片组件”。是平常使用的一些项目，主要是在ant-design-vue框架下进行封装的上传图片组件。

一、主要属性

1.beforeUpload

定义：上传文件之前的钩子函数，当文件从本地上传选中之后，文件上传之前，会通过这个函数进行一系列的操作。如判断字符串的大小，文件类型，返回true则继续上传操作，返回false，则停止上传

const beforeUpload = (file) => {
    //判断文件的大小，这里是kb，file.size/1024 = xM(M兆为单位)，xM /1024 = yG(G为单位)
  let size = file.size / 1024 / 1024

  if (size > 1024) {

    message.error('上传文件太大', 1.5,)
    return false
  }
  let ext = file.name.split(".").pop()
  if (!(ext == "jpg" || ext == "png")) {
    message.error("只能上传jpg、png等图片格式文件")
  } else {
    
  }
  ret