这个数字…………

在这里插入图片描述

起因：

由于最近做的是CMS系统，上传文件，图片功能太多，使用element的文件上传组件，但是每次都需要写，感觉太繁琐，于是有了男人的想法………对 element 的文件上传组件进行了封装

个人认为还是挺全的，如果各位小哥有更好的建议或意见欢迎评论区提出，我会根据实际情况进行更改组件

组件已经上传到了 github 和 npm

组件优势---------->使用方便，比例（80*80），大小（MB），校验（必填项）等，一个参数搞定，记得点赞藏哦

1：增加上传为空校验，可选择是否是必填项
2：自定义为空提示
2：增加上传图片的比例尺寸校验，例如图片：支持图片 === | >= || <= 80*80，80是使用的时候传的
3：规定文件上传大小
4：自定义上传主题：图片或文件
5：自定义上传个数
6：指定文件上传完毕后是否继续显示上传按钮
7：增加一键清空按钮，可以根据参数让他显示不显示
8：文件上传成功后，可自动对你的参数进行赋值
9：是否开启剪裁（还在开发，请持续关注）
10：Hppt: 上传的端口，本地环境，测试环境，上线环境
单选、多选、支持发送 cookie 凭证信息等

github 地址

https://github.com/jasen666/uploadmodel

npm 地址

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

如果还不会把自己写的代码放到 npm 请立即学习！！！
可以参考我的另外一篇文章：
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

对象参数

this.$emit('setUrlPath',{
        fromKey: this.fromKey,
        url: response.imgUrl, //传入服务器返回数据
        multiple, //判断是否是多选
        response,//服务器返回的信息
        nowIndex:
          multiple === true
            ? fileList.findIndex(item => item.url === response.imgUrl)
            : "" //传入当前下标
      })

==注意==

文件上传成功后会通过这个参数把把服务器返回的数据，返回过来，大家可以在这里进行数据处理
下面是我的使用方发，大家可以借鉴

    SetUrlPath(prcturlData) {
      if (prcturlData.multiple) {//判断单选多选
      //fromdata 点击保存按钮向服务器发送数据
        this.fromdata[prcturlData.fromKey[prcturlData.nowIndex]] =
          prcturlData.url;
      } else {//单选直接复制，URL是文件上传成功后，返回的地址
        this.fromdata[prcturlData.fromKey] = prcturlData.url;
      }
    },

建议element版本2.5以上哦，不然slot-scope不好使，你的单个删除按钮也没有用

单个删除

部分内容演示

图片格式 + 是否校验 + 一键清空 +上传成功后不再显示上传按钮

在这里插入图片描述

:listType='picture-card'
默认是：picture-card(图片格式) 可选值 text（文件格式）

:needRequired='false'
默认是true，需要校验，设置为false就不会对大校验了，

:errorMessage='校验提示内容'
校验内容自定义

:showClearAllBtn='true'
是否显示一键清空按钮，默认是true

:putSuccessShowAddBtn='false'
上传成功后是否还继续显示上传按钮，默认是 false 不显示

图片格式 + 上传成功显示按钮 + 限制文件大小

在这里插入图片描述

:Size="0.05"
默认是 false,想校验文件大小之接按1024计算传过去就好了

:putSuccessShowAddBtn='true'
上传成功后是否还继续显示上传按钮，默认是 false 不显示

:listType='picture-card'
默认是：picture-card(图片格式) 可选值 text（文件格式）
 

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

在这里插入图片描述

  :Proportion="[250,250]"
  需要校验比例的话需要传入一个数组，且必须为两个值值类型为数字，多传无效
  
  :computationRule="'>='"
  校验的类型，=== 大小必须等于 >= 比例大小大于等于， 比例大小 <=

文件类型

在这里插入图片描述

其他都一样，之不过这个是文件类型的

  :listType="'text'"
  默认是：picture-card(图片格式) 可选值 text（文件格式）

结尾

暂时就写这么多吧，记得点赞哦😘

如果各位小哥有更好的建议或意见欢迎评论区提出，我会根据实际情况进行更改组件