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 实现倒计时秒杀的组件,紧接着通过实例代码给大家介绍小程序或者vue商品秒杀倒计时功能,需要的朋友可以参考下
    2019-04-04
  • vue中的@click.native 原生点击事件

    vue中的@click.native 原生点击事件

    这篇文章主要介绍了vue中的@click.native 原生点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue.js常用指令之循环使用v-for指令教程

    Vue.js常用指令之循环使用v-for指令教程

    这篇文章主要跟大家介绍了关于Vue.js常用指令之循环使用v-for指令的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 教你搭建按需加载的Vue组件库(小结)

    教你搭建按需加载的Vue组件库(小结)

    这篇文章主要介绍了教你搭建按需加载的Vue组件库(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue中使用stylus报错的解决

    Vue中使用stylus报错的解决

    如果你也和我一样,按照正常的流程下载并且配置了stylus,但是依旧报错,也许这篇文章就是你的菜,一起来看看吧
    2022-08-08
  • 原生Vue 实现右键菜单组件功能

    原生Vue 实现右键菜单组件功能

    这篇文章主要介绍了Vue 原生实现右键菜单组件功能,本文给大家扩展知识点vue点击菜单以外区域,隐藏菜单操作,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-12-12
  • Vue之插槽(Slot)的使用

    Vue之插槽(Slot)的使用

    这篇文章主要介绍了Vue之插槽(Slot)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue中监视属性和计算属性区别解析

    Vue中监视属性和计算属性区别解析

    这篇文章主要介绍了Vue中监视属性和计算属性区别,通过本文学习大家知道computed与watch配置项问题,computed能完成的功能,watch都可以完成,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • vue $refs动态拼接获取值问题

    vue $refs动态拼接获取值问题

    这篇文章主要介绍了vue $refs动态拼接获取值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论