欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue elementui上傳圖片限制格式、大小和尺寸方式

 更新時(shí)間:2024年03月08日 09:23:53   作者:Naive_Jam  
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

需求

  • 上傳圖片的格式為:.jpg、.jpeg、.png
  • 大小為:1M以內(nèi)
  • 尺寸為:400*400

代碼實(shí)現(xiàn)

直接拿的elementui官網(wǎng)的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: '上傳圖片的尺寸應(yīng)為' + E_width + '*' + E_height + ',當(dāng)前上傳圖片的尺寸為:' + 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('上傳圖片大小不能超過(guò) 1MB!')
          return reject(false)
        }
        // 調(diào)用[限制圖片尺寸]函數(shù)
        this.limitFileWH(400, 400, file).then((res) => {
          file.isFlag = res
          if (file.isFlag) {
            return resolve(true)
          } else {
            return reject(false)
          }
        })
      })
    },
// 上傳成功的回調(diào)
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

上傳的圖片不符合需求的會(huì)提示錯(cuò)誤信息,停止上傳。 

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦)

    Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦)

    這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時(shí),用v-model="visible"來(lái)控制時(shí),控件找不到這個(gè)值,才換成trigger="click",需要的朋友可以參考下
    2024-03-03
  • vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟

    vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟

    這篇文章主要介紹了vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • npm如何更新VUE package.json文件中依賴的包版本

    npm如何更新VUE package.json文件中依賴的包版本

    這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue實(shí)現(xiàn)購(gòu)物車場(chǎng)景下的應(yīng)用

    Vue實(shí)現(xiàn)購(gòu)物車場(chǎng)景下的應(yīng)用

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車場(chǎng)景下的應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 淺談Vue3中key的作用和工作原理

    淺談Vue3中key的作用和工作原理

    本文主要介紹了Vue3中key的作用和工作原理,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 使用vxe-table合并單元格后增加選中效果

    使用vxe-table合并單元格后增加選中效果

    這篇文章主要介紹了使用vxe-table合并單元格后增加選中效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue-for循環(huán)嵌套操作示例

    vue-for循環(huán)嵌套操作示例

    這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實(shí)例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • Vue3 appear 失效的問(wèn)題及如何使用 appear

    Vue3 appear 失效的問(wèn)題及如何使用 appear

    appear 是一個(gè)在元素默認(rèn)被顯示的情況下 調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下 執(zhí)行進(jìn)入動(dòng)畫的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫時(shí)遇到appear無(wú)法生效的問(wèn)題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧
    2023-10-10
  • vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式

    vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式

    這篇文章主要介紹了vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue 實(shí)現(xiàn)錨點(diǎn)功能操作

    vue 實(shí)現(xiàn)錨點(diǎn)功能操作

    這篇文章主要介紹了vue 實(shí)現(xiàn)錨點(diǎn)功能操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08

最新評(píng)論