欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

程序员文章站 2022-04-17 09:13:44
起因:由于最近做的是CMS系统,上传文件,图片功能太多,使用element的文件上传组件,但是每次都需要写,感觉太繁琐,于是有了男人的想法………对 element 的文件上传组件进行了封装个人认为还是挺全的,如果不各位小哥有好的建议或意见欢迎评论区提出,我会根据实际情况进行更改组件组件已经上传到了 github 和 npm组件优势---------->使用方便,比例,大小,校验,一个参数搞定1:增加上传为空校验,可选择是否是必填项2:自定义为空提示2:增加上传图片的比例尺寸校验,例...

这个数字…………对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

起因:

由于最近做的是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

Name must fill Type Default Description
accept String ".jpg, .png, .gif, .jpeg" “上传文件的类型,默认图片类型”
Hppt String ’ ’ 上传文件的端口地址(本地环境、测试环境、线上环境)
port String ’ ’ 上传图片的地址,详细地址(/upload.json这样)
Size Number|Boolean false 是否需要规定上传文件的大小
needRequired Boolean true 是否需要为空校验
errorMessage String 请上传图片文件 为空提交的时候的提示
fileList Array [] 文件上传的一个数组,用来存放上传文件内容 ,需要.sync支持
putSuccessShowAddBtn Boolean false 上传成功后是否还展示,上传按钮
Proportion Boolean|Array false 是否需要规定图片的尺寸比例大小
computationRule String === 进行比例对比时的规则,支持:===
listType String picture-card 是上传图片,还是上传文件,图片使用:picture-card,文件使用:text
showFileList Boolean true 上传成功后是否需要上传进行展示已上传文件列表
fromKey String|Array ’ ’ 上传成功后,将要修改的字段名字,把后台的文件路径进行复制
limit Number 1 上传文件的个数
showClearAllBtn Boolean true 是否展示一键清除按钮
needMultiple Boolean false 是否支持多选
withCredentials Boolean false 是否上传cooike凭证
headers object ’ ’ 设置上传的请求头部
label String ’ ’ 上传图片的左侧内容:例如:上传背景图,上传商标啥啥的
clearButtonStyle String margin-top:10px 一键清除的按钮样式
visible Boolean false 建议传一个动态的,当你进行回显的时候会有一个,渐显的效果,体验不是特别好,
==================== ========= ============ ================= ==================================



Methods

Method Description
@deleteServeFile=“deleteServeFile” 图片文件进行删除的时候会触发,此时你会拿到文件的信息,去服务器删除数据+
@setUrlPath=“SetUrlPath” 文件上传到服务器,会通过这个自定义方发把服务返回内容传过去

对象参数

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不好使,你的单个删除按钮也没有用

对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

部分内容演示

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

对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

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

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

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

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

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

图片格式 + 上传成功显示按钮 + 限制文件大小对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

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

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

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

图片限制比例大小 (80*80)

对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

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

文件类型对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。

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

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

结尾

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