這個數(shù)字…………

在這里插入圖片描述

起因：

由于最近做的是CMS系統(tǒng)兼蜈，上傳文件，圖片功能太多拙友，使用element的文件上傳組件为狸，但是每次都需要寫，感覺太繁瑣遗契，于是有了男人的想法………對 element 的文件上傳組件進(jìn)行了封裝

個人認(rèn)為還是挺全的辐棒，如果各位小哥有更好的建議或意見歡迎評論區(qū)提出，我會根據(jù)實(shí)際情況進(jìn)行更改組件

組件已經(jīng)上傳到了 github 和 npm

組件優(yōu)勢---------->使用方便牍蜂，比例（80*80）漾根，大小（MB）鲫竞，校驗(yàn)（必填項(xiàng)）等辐怕，一個參數(shù)搞定，記得點(diǎn)贊藏哦

1：增加上傳為空校驗(yàn)从绘，可選擇是否是必填項(xiàng)
2：自定義為空提示
2：增加上傳圖片的比例尺寸校驗(yàn)寄疏，例如圖片：支持圖片 === | >= || <= 80*80，80是使用的時候傳的
3：規(guī)定文件上傳大小
4：自定義上傳主題：圖片或文件
5：自定義上傳個數(shù)
6：指定文件上傳完畢后是否繼續(xù)顯示上傳按鈕
7：增加一鍵清空按鈕僵井，可以根據(jù)參數(shù)讓他顯示不顯示
8：文件上傳成功后陕截，可自動對你的參數(shù)進(jìn)行賦值
9：是否開啟剪裁（還在開發(fā)，請持續(xù)關(guān)注）
10：Hppt: 上傳的端口批什，本地環(huán)境农曲，測試環(huán)境，上線環(huán)境
單選驻债、多選乳规、支持發(fā)送 cookie 憑證信息等

github 地址

https://github.com/jasen666/uploadmodel

npm 地址

https://www.npmjs.com/package/jasen-vue-uploadmodel

如果還不會把自己寫的代碼放到 npm 請立即學(xué)習(xí)！Ｈ春骸驯妄！
可以參考我的另外一篇文章：
https://blog.csdn.net/weixin_46095200/article/details/107235451

使用方法：

npm i jasen-vue-uploadmodel -S

import Vue from 'vue'
import UploadFile from 'jasen-vue-uploadmodel'
 
Vue.component('UploadFile', UploadFile)

<UploadFile
        clearButtonStyle="margin-left:80px;margin-top:10px"
        :visible="changeFormVisible"
        :Hppt="Hppt"
        :className="'My-el-form-item'"
        :fromKey="'logo'"
        @setUrlPath="SetUrlPath"
        :limit="1"
        :fileList.sync="fileListLogo"
        :label="'logo'"
      />

Api

Attributes

Methods

對象參數(shù)

this.$emit('setUrlPath',{
        fromKey: this.fromKey,
        url: response.imgUrl, //傳入服務(wù)器返回數(shù)據(jù)
        multiple, //判斷是否是多選
        response,//服務(wù)器返回的信息
        nowIndex:
          multiple === true
            ? fileList.findIndex(item => item.url === response.imgUrl)
            : "" //傳入當(dāng)前下標(biāo)
      })

==注意==

文件上傳成功后會通過這個參數(shù)把把服務(wù)器返回的數(shù)據(jù)，返回過來留美，大家可以在這里進(jìn)行數(shù)據(jù)處理
下面是我的使用方發(fā)卷要，大家可以借鑒

    SetUrlPath(prcturlData) {
      if (prcturlData.multiple) {//判斷單選多選
      //fromdata 點(diǎn)擊保存按鈕向服務(wù)器發(fā)送數(shù)據(jù)
        this.fromdata[prcturlData.fromKey[prcturlData.nowIndex]] =
          prcturlData.url;
      } else {//單選直接復(fù)制，URL是文件上傳成功后独榴，返回的地址
        this.fromdata[prcturlData.fromKey] = prcturlData.url;
      }
    },

建議element版本2.5以上哦僧叉，不然slot-scope不好使，你的單個刪除按鈕也沒有用

單個刪除

部分內(nèi)容演示

圖片格式 + 是否校驗(yàn) + 一鍵清空 +上傳成功后不再顯示上傳按鈕

在這里插入圖片描述

:listType='picture-card'
默認(rèn)是：picture-card(圖片格式) 可選值 text（文件格式）

:needRequired='false'
默認(rèn)是true棺榔，需要校驗(yàn)瓶堕，設(shè)置為false就不會對大校驗(yàn)了，

:errorMessage='校驗(yàn)提示內(nèi)容'
校驗(yàn)內(nèi)容自定義

:showClearAllBtn='true'
是否顯示一鍵清空按鈕症歇，默認(rèn)是true

:putSuccessShowAddBtn='false'
上傳成功后是否還繼續(xù)顯示上傳按鈕郎笆，默認(rèn)是 false 不顯示

圖片格式 + 上傳成功顯示按鈕 + 限制文件大小

在這里插入圖片描述

:Size="0.05"
默認(rèn)是 false,想校驗(yàn)文件大小之接按1024計算傳過去就好了

:putSuccessShowAddBtn='true'
上傳成功后是否還繼續(xù)顯示上傳按鈕，默認(rèn)是 false 不顯示

:listType='picture-card'
默認(rèn)是：picture-card(圖片格式) 可選值 text（文件格式）
 

圖片限制比例大小 （80*80）

在這里插入圖片描述

  :Proportion="[250,250]"
  需要校驗(yàn)比例的話需要傳入一個數(shù)組忘晤，且必須為兩個值值類型為數(shù)字宛蚓，多傳無效
  
  :computationRule="'>='"
  校驗(yàn)的類型，=== 大小必須等于 >= 比例大小大于等于设塔， 比例大小 <=

文件類型

在這里插入圖片描述

其他都一樣凄吏，之不過這個是文件類型的

  :listType="'text'"
  默認(rèn)是：picture-card(圖片格式) 可選值 text（文件格式）

結(jié)尾

暫時就寫這么多吧，記得點(diǎn)贊哦??

如果各位小哥有更好的建議或意見歡迎評論區(qū)提出闰蛔，我會根據(jù)實(shí)際情況進(jìn)行更改組件