Elememt el-upload 上传图片组件

场景

使用el-upload组件上传多张图片进行大小数量限制和 OSS 上传 限制上传时的速度避免一秒上传多张图片

Elememt el-upload 上传图片组件_第1张图片

el-upload属性配置

亿点小知识:这个官网说是必传但是我们在开发中实际用不到 具体写法看代码

  • action : 上传的地址
  • auto-upload :是否在选取文件后立即进行上传
  • list-type:文件列表的类型
  • on-exceed:文件超出个数限制时的钩子
  • limit:最大允许上传个数
  • on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
  • file-list:上传的文件列表, 例如: []
  • on-remove:删除文件之前的钩子
    以上就是本次用到的属性

详解

可以实现的业务有 :
上传文件数量控制,上传格式及大小限制,上传过程中的各种钩子,显示已上传文件列表,上传时提交数据,选取和上传分开处理,
例如:

  • on-exceed 文件超出个数限制时的钩子 function(files, fileList)
    这个事件一般要和上面的limit来联动,如上面的 :limit=“3” 显示限制了数目 那么这里如果超过三个 一个给一个提示

  • before-remove=“beforeRemove” 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 function(file, fileList)

  • 文件上传限制大小和类型: :before-upload="beforeAvatarUpload"可以在这个方法里面加校验,具体如下,这样文件上传时候如果不合格的图片就直接被拒绝

实战代码

HTML

<el-upload ref="imgList1D" 
action 
   :auto-upload="false"  // 选取文件后不进行上传
   list-type="picture-card" // 类型
   :on-exceed="linmitFun" // 超出数量方法
   :limit="4" // 限制数量
   :on-change="imgAdd" // 触发时的方法 
   :file-list="imgList" // 列表
   :on-remove="remove"  // 删除方法
   v-loading="isloading"  // 控制 oss 加载中的时候 限制不让操作
   >
  <i class="el-icon-plus"></i> // 添加html
</el-upload>
 <div>单次最多可选4张,仅支持上传jpg/png/jpeg格式文件,单个文件不能超过500kb</div>

JS

  • on-change 方法
async imgAdd(file) {
      this.isloading = true
      const typeArr = ["image/jpg", "image/jpeg", "image/png"]; 
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.Ptloading = false;
        this.$message.error("只能上传图片!");
        this.$refs.upload1.clearFiles();
        this.isloading = false
        return;
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
        fileList.pop();
        this.isloading = false
        return;
      }
      const url = await upFile(file); //上传 oss接口 
      this.imgList.push(
        {
          url: url,
          uid: file.uid,
        });
        this.isloading = false
    },
  • on-remove 删除方法
remove(file, fileList) {
      this.on-remove = fileList;
 },
  • on-exceed 超出数量限制方法
linmitFun() {
      this.$message({
        message: "最多上传4张图片",
        type: "warning",
      });
    },

Elememt el-upload 上传图片组件_第2张图片
以上就是Elememt el-upload 上传图片组件感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…

你可能感兴趣的:(前端,elementui,javascript)