el-upload上传多张图片组件

蜡笔大帅

已于 2022-02-20 11:05:31 修改

阅读量3k

点赞数 5

文章标签： vue.js javascript 前端 elementui

于 2022-02-10 16:56:47 首次发布

本文链接：https://blog.csdn.net/jgujgu/article/details/122863836

版权

本文介绍了一个在Vue+Element UI后台管理系统中实现多图片上传的组件，包括限制上传数量（最多10张），文件格式（仅限JPEG/PNG/JPG），大小（不超过2MB）以及宽高限制（750x500）。同时提供了上传前的处理，文件移除、上传成功、失败等回调函数，并展示了如何回显已上传图片。

摘要由CSDN通过智能技术生成

背景

vue+element后台管理系统中的表单提交包含“资质上传”功能（就是需要多图片上传）
要求：

文件上传之前做处理
限制最多只能上传10张图片
格式限制 ‘image/jpeg’, ‘image/png’, ‘image/jpg’
图片不能超过2MB
上传图片的宽高限制为宽：750，高：500

实现代码：

HTML
说明：
action 必选参数，上传的地址 string
list-type 文件列表的类型 string text/picture/picture-card
file-list 上传的文件列表 array
on-remove 文件列表移除文件时的钩子 function(file, fileList)
before-upload 上传文件之前的钩子 function(file)
headers 设置上传的请求头部 object
on-success 文件上传成功时的钩子 function(response, file, fileList)
on-error 文件上传失败时的钩子 function(err, file, fileList)
on-exceed 文件超出个数限制时的钩子 function(files, fileList)
on-progress 文件上传时的钩子 function(event, file, fileList)
http-request 覆盖默认的上传行为，可以自定义上传的实现 function

<template>
  <div>
    <el-upload
      :action="actionSrc"
      list-type="picture-card"
      :file-list="files"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :headers="headerObj"
      :on-success="successFn"
      :on-error="errorFn"
      :on-exceed="exceedLength"
      :on-progress="uploadVideoProcess"
      style="border: 1px solid #DCDFE6;border-radius: 4px;padding: 10px

最低0.47元/天解锁文章