位置: IT常识 - 正文

el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数(el-upload上传文件携带参数)

编辑:rootadmin
el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数 先看效果图:

推荐整理分享el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数(el-upload上传文件携带参数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:el-upload上传文件类型限制,el-upload上传文件和参数,el-upload上传文件参数,el-upload上传文件必传校验,el-upload上传文件携带参数,el-upload上传文件必传校验,el-upload上传文件给后端,el-upload上传文件夹,内容如对您有帮助,希望把文章链接给更多的朋友!

项目需求:

本地上传文件类型只能是 xml 和 a2l 的 做多上传个数为2个 可以多选上传 每种格式最多上传一个文件 上传为手动上传到服务器 上传错误有相应的提示

需求分析:el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数(el-upload上传文件携带参数)

  首先上传为手动上传那么文件类型我是打算在选取文件到前端页面的过程中我就处理文件 或者也    可以在上传服务器的时候做判断 我这里选择选取文件的时候做判断 ①是为了展示正确不会有不      满足我需求的文件显示在前端页面用户体验不好 ②是为了在服务器之前处理的话要用到 before-      upload (上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被              reject,则停止上传)钩子函数 而 before-upload 必须有  action (必选参数,上传的地址)才能    触发 而我手动上传我需要通过接口传参所以我不想使用action 填写地址 会有很多不变

  1.上传为手动上传到服务器   :auto-upload="false";

  2.多选上传  :multiple="true"  默认为true

  3.文件类型  accept=".xml,.a2l"

  4.做多上传个数为2个并提示  :limit="2"   :on-exceed="limitCheck" 文件超出个数限制时的钩子

  5.上传错误有相应的提示并且每种格式最多上传一个文件  :on-change="changefile" 文件状态          改变时的钩子,添加文件、上传成功和上传失败时都会被调

代码展示: <el-upload              ref="upload"              :action="url"              :before-remove="beforeRemove"              :on-change="changefile"              accept=".xml,.a2l"              :limit="2"              :on-exceed="limitCheck"              :auto-upload="false"              :multiple="true"              :file-list="fileList">              <el-button                slot="trigger"                size="mini"                type="primary"                style="letter-spacing: 1px"                >选取xml/a2l文件</el-button>              <el-button                style="margin-left: 10px"                size="mini"                type="success"                :loading="submitebtn"                :disabled="this.fileList.length == 0"                @click="submitUpload"                >上传配置</el-button>              <h4 slot="tip" class="el-upload__tip">                只能上传xml/a2l文件              </h4>            </el-upload>data(){ return{ url: "",//action 设置为空字符串即可 fileList: [],//展示在页面上的文件 操作可以对 文件进行 相应的展示和删除 }}methods:{ // 选择的文件超出限制的文件总数量时触发 limitCheck() { this.$message.warning("最多只能上传2个文件"); }, // 上传到服务器 submitUpload() { this.submitebtn = true; let formData = new FormData(); console.log(this.fileList); let newname = this.fileList[0].raw.name; let filea2L = {}; let fileXML = {}; if (newname.substring(newname.lastIndexOf(".")) === ".a2l") { filea2L = this.fileList[0].raw; fileXML = this.fileList[1] ? this.fileList[1].raw : {}; } else { filea2L = this.fileList[1] ? this.fileList[1].raw : {}; fileXML = this.fileList[0].raw; } console.log(fileXML); formData.append("a2lFile", filea2L); formData.append("soaXml", fileXML); formData.append("projectId", this.projectId); this.postRequest("/file/upload", formData).then((res) => { console.log(res); if (res.code == 0) { this.$message({ dangerouslyUseHTMLString: true, message:`<h4>文件上传成功</h4><h4>${filea2L.name?filea2L.name:''}</h4> <h4>${fileXML.name?fileXML.name:''}</h4>`, type:'success', duration:3500 }); this.submitebtn = false; } else { this.$message.error(res.message); this.submitebtn = false; } }); }, // 文件列表移除文件时的钩子 handleRemove(file, fileList) { console.log(file, fileList); this.fileList = fileList; }, // 点击文件列表中已上传的文件时的钩子 handlePreview(file) { console.log(file); }, // 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 beforeRemove(file, fileList) { console.log(file); console.log(fileList); return this.$confirm(`确定移除 ${file.name}?`); }, // 选取文件改变时的操作 可以判断文件类型是否 把不符合的删除缓存 fileList 就是页面缓存的文件 changefile(file, fileList) { console.log(file); console.log(fileList); let arr = []; fileList.forEach((item, index) => { let endname = item.raw.name.substring(item.raw.name.lastIndexOf(".")); arr.push(endname); if (endname != ".a2l" && endname != ".xml") { this.$message.error("上传文件格式只能是 xml 、a2l 格式!"); fileList.splice(index, 1); } }); console.log(arr); if (new Set(arr).size != fileList.length) { fileList.splice(-1); this.$message.warning("选取失败 ! 相同格式的最多上传一次"); } console.log(fileList); this.fileList = fileList; },}
本文链接地址:https://www.jiuchutong.com/zhishi/297828.html 转载请保留说明!

上一篇:pnpm学习(pnmdp)

下一篇:YOLOv5/v7/v8 改进首发最新PWConv核心结构|来自最新CVPR2023顶会,进一步轻量化!测试数据集mAP有效涨点,进一步降低参数量,追求更高的 FLOPS(yolov3 改进)

  • 那些影响世界的广告营销理论,经典并与时俱进(那些影响世界的名人)

    那些影响世界的广告营销理论,经典并与时俱进(那些影响世界的名人)

  • 小米12x是直屏还是曲屏(小米12是直屏吗)

    小米12x是直屏还是曲屏(小米12是直屏吗)

  • 微信语音通话锁屏听不见(微信语音通话锁屏会中断吗)

    微信语音通话锁屏听不见(微信语音通话锁屏会中断吗)

  • 文件太大怎么变小(文件太大怎么变小一点)

    文件太大怎么变小(文件太大怎么变小一点)

  • 微机操作系统可以分为哪三种(微机操作系统可以分为)

    微机操作系统可以分为哪三种(微机操作系统可以分为)

  • 华为mate30pro侧边栏怎么设置(华为mate30pro侧边有个个小块)

    华为mate30pro侧边栏怎么设置(华为mate30pro侧边有个个小块)

  • 安卓手机可以修改微信号吗(安卓手机可以修改airpods名称吗)

    安卓手机可以修改微信号吗(安卓手机可以修改airpods名称吗)

  • 抖音回关不了怎么回事(抖音回关不了怎么设置)

    抖音回关不了怎么回事(抖音回关不了怎么设置)

  • 键盘space键在哪(虚拟键盘怎么调出来)

    键盘space键在哪(虚拟键盘怎么调出来)

  • vivox30与vivox50的区别(vivox30跟vivox50有什么区别)

    vivox30与vivox50的区别(vivox30跟vivox50有什么区别)

  • 荣耀30与华为nova7对比(荣耀30与华为nova7哪个性价比高)

    荣耀30与华为nova7对比(荣耀30与华为nova7哪个性价比高)

  • 光纤拔掉插回去后连不上网了(光纤拔掉插回去没反应)

    光纤拔掉插回去后连不上网了(光纤拔掉插回去没反应)

  • 华为nova7pro怎么设置返回键(华为nova7pro怎么设置微信视频美颜)

    华为nova7pro怎么设置返回键(华为nova7pro怎么设置微信视频美颜)

  • 防火墙技术分为哪三大类(防火墙技术分为哪两层)

    防火墙技术分为哪三大类(防火墙技术分为哪两层)

  • 充电宝充电时可以给手机充电吗(充电宝充电时可以插两根数据线吗)

    充电宝充电时可以给手机充电吗(充电宝充电时可以插两根数据线吗)

  • 公交车手机付款用的是什么软件呢(公交车手机付款微信)

    公交车手机付款用的是什么软件呢(公交车手机付款微信)

  • 华为手机下面三个键如何恢复(华为手机下面三个键怎么设置出来)

    华为手机下面三个键如何恢复(华为手机下面三个键怎么设置出来)

  • 微信朋友圈背景图可以不让别人看到么(微信朋友圈背景图片大全高清)

    微信朋友圈背景图可以不让别人看到么(微信朋友圈背景图片大全高清)

  • 苹果11分辨率是多少(苹果11分辨率是1080吗)

    苹果11分辨率是多少(苹果11分辨率是1080吗)

  • wps历史记录在哪(wps历史记录在哪手机和电脑同步吗)

    wps历史记录在哪(wps历史记录在哪手机和电脑同步吗)

  • 华为nova5耳机插口在哪里(华为nova5耳机插上没反应但可以充电)

    华为nova5耳机插口在哪里(华为nova5耳机插上没反应但可以充电)

  • 咸鱼违规记录怎么消除(咸鱼违规记录怎么申诉)

    咸鱼违规记录怎么消除(咸鱼违规记录怎么申诉)

  • 如何定位已关机的手机(如何定位已关机的oppo手机)

    如何定位已关机的手机(如何定位已关机的oppo手机)

  • 怎么将余额宝里的钱转到银行卡(怎么将余额宝里的钱)

    怎么将余额宝里的钱转到银行卡(怎么将余额宝里的钱)

  • 小米称怎么连手机(小米的秤怎么连接)

    小米称怎么连手机(小米的秤怎么连接)

  • 如何查看win10曾经保存过的WiFi密码(如何查看windows10)

    如何查看win10曾经保存过的WiFi密码(如何查看windows10)

  • Win10再曝bug 使用Chrome浏览器访问特定路径立即蓝屏(windows 10 bug)

    Win10再曝bug 使用Chrome浏览器访问特定路径立即蓝屏(windows 10 bug)

  • 税务ukey电子发票二维码用什么扫码
  • 销售收入不含税怎么计算增值税额
  • 一般纳税人做外账没有一点成本票怎么办?
  • 纳税标准怎么算
  • 个人所得税应纳税所得额减半征收
  • 电汇凭证的会计怎么做账
  • 辞退补偿款怎么算
  • 金蝶软件预收账款明细
  • 餐饮个体工商户交税标准
  • 别墅一般送车库吗
  • 应收留抵税额退税款科目怎么添加进项
  • 代发工资开票内容
  • 从对公账户提取备用金违法吗
  • 自建厂房可以不办理房产证吗
  • 母公司占股子公司多少
  • 2017年个税税率表及个税计算公式
  • 会计分录如何试算出来的
  • 收到税务局信息
  • 政府补助计量的基础是
  • 服务成本怎么处理
  • 增值税中的筹划方法哪些可以应用在消费税中,为什么?
  • 公司福利放置零食文案
  • window7无法正常启动怎么办
  • win7安装高版本chrome
  • 提取的盈余公积是所有者权益吗
  • element栅格布局
  • 土地出资是否涉及企业所得税
  • 公司开发新产品或购买许可证最快的方法是
  • 计入职工福利费的有哪些
  • 报表重分类和不重分类
  • php构造函数重载
  • transformer模型包含哪些结构
  • php 银行卡支付
  • 溢价发行股票相关手续费计入
  • 旅游费记入什么科目
  • 劳动法里病假工资怎么算
  • 借受托代销商品贷受托代销商品款
  • 没有发票的福利支出如何入帐
  • sql server2005一个表中可以设置
  • sql字符串处理函数
  • 企业捐赠支出计入什么科目
  • 钢管扣件租赁公司账务处理
  • 银行承兑贴现需要多久
  • 房地产行业账务处理和主要税种
  • 股权转让会计账务处理方法
  • 税前扣除的职工福利费怎么算
  • 固定资产房屋拆除后如何做帐务处理
  • 小规模纳税人发票怎么开
  • 文化事业建设费逾期未申报怎么办
  • 明年发票可以入到今年有什么惩罚
  • 外贸企业怎么开出口发票
  • truncate可以删除部分数据
  • win10显示请勿关闭电脑
  • samba文件大小限制
  • linux文件压缩和解压缩命令
  • linux ftpd
  • win10系统宽带连接错误解决方法
  • xp启用windows功能
  • win10系统中怎么打开IE浏览器
  • win10激活界面打不开
  • win7系统连不了蓝牙
  • windows8截屏
  • win10预览版绿屏重启解决
  • jquery怎么写
  • [置顶] [寒江孤叶丶的Cocos2d-x之旅_29]在Cocos2d-x中集成protobuf (Protocol Buffers)
  • python条件语句的基本结构
  • cocos 2d x
  • unity 3d脚本编程
  • java颜色代码对照表图片
  • 触摸模式设置
  • javascript getattribute
  • jquery.serialize() 函数语法及简单实例
  • 税务局与稽查局哪个好
  • 重庆国税电子税务局手机版
  • 河北省税务局对外公开电话
  • 荷兰基本工资一个月多少工资
  • 浙江省焊工操作证查询
  • 合格的税务人
  • 天津车辆购置税网上办税
  • 社保缴费信息提醒怎么改
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设