首页 > 网络编程 > JavaScript > element-ui图片上传组件查看和限制方式

element-ui图片上传组件查看和限制方式

福牛 3月 28, 2023 31 0

element-ui图片上传组件查看和限制

element-ui经常遇到图片上传，然后编辑查看限制上传个数和上传提示

  • 1、limit上传个数限制配合on-exceed属性使用
  • 2、上传之前提示图片大小限制属性before-upload
  • 3、上传带参数data
  • 4、上传成功on-success和移除on-remove
  • 5、file-list属性展示的列表数组，查看也是设置这个

html的代码

  1. <el-upload
  2.      :limit=“1”
  3.      :on-exceed=“config.exceed” ref=“upload” class=“upload-demo”
  4.      :before-upload=“config.onBeforeUpload”
  5.      :on-success=“config.handleAvatarSuccess”
  6.      :data=“config.dataParam”
  7.      :action=“config.actionUrl”
  8.      :on-remove=“config.handleRemove”
  9.      :file-list=“config.fileList2” //保存当前图片对象数组
  10.      :multiple=“false”
  11.      :show-file-list=“true”
  12.      list-type=“picture”>
  13.          <el-button size=“small” type=“primary”>点击上传</el-button>
  14.      </el-upload>

配置信息js 代码

  1. config: {
  2.      dataParam: {
  3.          bizType: 3,
  4.          useType: 2
  5.      },
  6.      actionUrl: ‘api/base-fdfs/fdfs/public/upload’,
  7.      exceed:()=>{
  8.          this.$alert(‘请删除后再上传’, ‘异常提示’, {
  9.          confirmButtonText: ‘确定’,
  10.          type: ‘warning’
  11.          });
  12.      },
  13.      handleRemove: (file,fileList) => {
  14.          this.form.picture=”
  15.          this.config.fileList2=[] //删除此数组内的图片对象
  16.      },
  17.      onBeforeUpload: (file) => {
  18.          const isIMAGE = ((file.type === ‘image/jpeg’) || (file.type === ‘image/png’) || (file.type === ‘image/bmp’));
  19.          if (!isIMAGE) {
  20.          this.$alert(‘上传文件只能是图片格式（jpeg/png/bmp）’, ‘异常提示’, {
  21.          confirmButtonText: ‘确定’,
  22.          type: ‘warning’
  23.          });
  24.          return false
  25.          }
  26.          if(file.size/1024/1024>5){
  27.          console.log(file.size)
  28.          this.$alert(‘图片不能大于5M’, ‘异常提示’, {
  29.          confirmButtonText: ‘确定’,
  30.          type: ‘warning’
  31.          });
  32.          return false
  33.          }
  34.          return true
  35.      },
  36.      handleAvatarSuccess: (res, file) => {
  37.          this.form.repairImages = file.response.data
  38.      },
  39.      fileList2: [],
  40.      },

查看的时候还需给file-list数组设置，展示图片

  1.      let obj={}
  2.      this.config.fileList2=[]
  3.      this.$set(obj,‘name’,‘file’);
  4.      this.$set(obj,‘url’,response.data.picture);
  5.      this.config.fileList2.push(obj)

清除文件列表，上传组件变初始状态

  1. this.$refs.upload.clearFiles() //清除图片

element-ui限制一张图片上传

-1

需求描述

在做图片上传组件的时候 有时候需求回要求只能上传一张图片

bug：element-ui在上传完一张图片后上传按钮还会存在 虽然可以用自带的limt属性加以限制 但是上传按钮依然会存在 且存入数组的值依然会增加

-2

解决

可以判断上传后数组的length来控制图片上传的样式 让其上传一张后隐藏上传按钮 达到控制图片上传的数量需求

  1. <el-form-item label=“礼包主图” prop=“goodsimage” :required=“true”>
  2.          <el-upload
  3.              :class=“{ disabled: uploadDisabled }” //这里动态控制样式
  4.              :limit=“1”
  5.              ref=“picUpload”
  6.              class=“pic-div”
  7.              action=“‘xxxxxxx'”
  8.              :with-credentials=“true”
  9.              list-type=“picture-card”
  10.              :on-remove=“removePic”
  11.              :on-change=“handleEditChange”
  12.              :file-list=“goodsimage”
  13.              :on-exceed=“beyond”
  14.          >
  15.              <div class=“el-upload file-upload-container” @click.stop=“popFileUpload(‘0’)”>
  16.              <i class=“el-icon-plus”></i>
  17.              </div>
  18.          </el-upload>
  19.          </el-form-item>
  1.      // 隐藏图片上传按钮
  2.      uploadDisabled() {
  3.          return this.goodsimage.length > 0 //判断图片上传的数量动态控制按钮隐藏与显示
  4.      },
  1. <style>
  2. .disabled .el–upload—picture–card {
  3.      display: none;
  4. }
  5. </style>

最终效果

-3

-4

礼包视频也是如此要求仅限上传1个视频 由于是button按钮 俺就直接使用v-if判断视频的length来控制视频上传按钮的显示与隐藏

  1. <el-button ***v-if=”this.goodsvideo.length < 1″*** class=”file-upload-btn-container” @click.stop=”popFileUpload(‘1’)” size=”small” type=”primary”>点击上传</el-button >

-5

上传视频后按钮隐藏

-6

em…

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论