vue elementui上传图片限制格式、大小和尺寸方式

 更新时间:2024年03月08日 09:23:53   作者:Naive_Jam  
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

需求

  • 上传图片的格式为:.jpg、.jpeg、.png
  • 大小为:1M以内
  • 尺寸为:400*400

代码实现

直接拿的elementui官网的html代码,加了一句:

accept="image/jpg,image/jpeg,image/png"
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  accept="image/jpg,image/jpeg,image/png"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

下面是写在methods里的js代码: 

// 限制图片尺寸
    limitFileWH(E_width, E_height, file) {
      const _this = this
      let imgWidth = ''
      let imgHight = ''
      const isSize = new Promise(function(resolve, reject) {
        const width = E_width
        const height = E_height
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          imgWidth = img.width
          imgHight = img.height
          const valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(() => {
        return true
      }, () => {
        _this.$message.warning({
          message: '上传图片的尺寸应为' + E_width + '*' + E_height + ',当前上传图片的尺寸为:' + imgWidth + '*' + imgHight,
          btn: false
        })
        return false
      })
      return isSize
    },
 
    // 图片上传之前的判断
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const suffix = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!suffix) {
          this.$message.error('只能上传图片!')
          return reject(false)
        }
        if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 1MB!')
          return reject(false)
        }
        // 调用[限制图片尺寸]函数
        this.limitFileWH(400, 400, file).then((res) => {
          file.isFlag = res
          if (file.isFlag) {
            return resolve(true)
          } else {
            return reject(false)
          }
        })
      })
    },
// 上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

上传的图片不符合需求的会提示错误信息,停止上传。 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中实现表单地区选择与级联联动示例详解

    Vue中实现表单地区选择与级联联动示例详解

    这篇文章主要为大家介绍了Vue中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Mock.js在Vue项目中的使用小结

    Mock.js在Vue项目中的使用小结

    这篇文章主要介绍了Mock.js在Vue项目中的使用,在vue.config.js中配置devServer,在before属性中引入接口路由函数,详细步骤跟随小编通过本文学习吧
    2022-07-07
  • vue项目优雅实现自动引入组件的方法详解

    vue项目优雅实现自动引入组件的方法详解

    在我们写vue项目的时候,都会引入一些组件库,有时候有可能还不止一个组件库,那么如何优雅的实现自动引入组件呢,下面小编就来和大家详细讲讲吧
    2023-09-09
  • Vue模板内引入的组件样式覆盖失效原因及解决

    Vue模板内引入的组件样式覆盖失效原因及解决

    这篇文章主要介绍了Vue模板内引入的组件样式覆盖失效原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于Vue中img动态拼接src图片地址的问题

    关于Vue中img动态拼接src图片地址的问题

    这篇文章主要介绍了关于Vue中img动态拼接src图片地址的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue3中导航守卫的使用教程

    Vue3中导航守卫的使用教程

    在Vue3中,导航守卫(Navigation Guards)用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下
    2023-08-08
  • Vue安装与使用

    Vue安装与使用

    Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能!下面来看看其得安装及使用方法吧
    2021-10-10
  • Vue中的虚拟DOM、diff算法、key的作用详解

    Vue中的虚拟DOM、diff算法、key的作用详解

    这篇文章主要介绍了Vue中的虚拟DOM、diff算法、key的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 详解如何在Vue Router中实现动态路由匹配

    详解如何在Vue Router中实现动态路由匹配

    在构建复杂的单页面应用程序(SPA)时,动态路由匹配是一项强大的功能,它允许我们根据URL中的参数动态加载内容,Vue Router 提供了动态路由匹配的能力,使得我们可以根据不同的URL参数展示不同的组件或数据,本文将介绍如何在Vue Router中实现动态路由匹配
    2025-05-05
  • Vue 创建组件的两种方法小结(必看)

    Vue 创建组件的两种方法小结(必看)

    Vue 创建组件的方法有哪些呢?下面小编就为大家分享一篇Vue 创建组件的两种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论