位置: 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 改进)

  • 图层有哪几种类型(图层有哪几种类型,如何筛选指定类型的图层?)

    图层有哪几种类型(图层有哪几种类型,如何筛选指定类型的图层?)

  • 手机流量达到上限怎么办(手机流量达到上限是什么意思)

    手机流量达到上限怎么办(手机流量达到上限是什么意思)

  • 有些人的微信怎么没有朋友圈(有些人的微信怎么删不掉)

    有些人的微信怎么没有朋友圈(有些人的微信怎么删不掉)

  • 华为手表gt2微信不提示(华为手表gt2微信看不到内容)

    华为手表gt2微信不提示(华为手表gt2微信看不到内容)

  • 京东包邮条件(京东买东西包邮)

    京东包邮条件(京东买东西包邮)

  • 视频美颜在哪里(华为手机微信视频美颜在哪里)

    视频美颜在哪里(华为手机微信视频美颜在哪里)

  • 纸质照片是什么照片(纸质照片是什么样子的图片)

    纸质照片是什么照片(纸质照片是什么样子的图片)

  • 手机wps只有查找没有替换(手机wps查找为什么有时候查找不出来)

    手机wps只有查找没有替换(手机wps查找为什么有时候查找不出来)

  • 华为手机的手电筒快捷键怎么使用(华为手机的手电筒在哪里设置)

    华为手机的手电筒快捷键怎么使用(华为手机的手电筒在哪里设置)

  • 5mp和4k哪个清晰(4k跟1080p哪个更清晰)

    5mp和4k哪个清晰(4k跟1080p哪个更清晰)

  • 苹果11怎么关闭快门声音(苹果11怎么关闭打开的软件)

    苹果11怎么关闭快门声音(苹果11怎么关闭打开的软件)

  • 苹果xs max屏幕失灵(iphone xs max手机屏幕失灵)

    苹果xs max屏幕失灵(iphone xs max手机屏幕失灵)

  • 手机微信怎么粘贴(手机微信怎么粘贴图片)

    手机微信怎么粘贴(手机微信怎么粘贴图片)

  • 怎样退出钉钉视频会议(怎样退出钉钉视频会议而别人看不见)

    怎样退出钉钉视频会议(怎样退出钉钉视频会议而别人看不见)

  • 抖音剪映在哪里(抖音剪映在哪里 功能)

    抖音剪映在哪里(抖音剪映在哪里 功能)

  • airpods2的灯在哪里(airpods2的灯在哪个位置)

    airpods2的灯在哪里(airpods2的灯在哪个位置)

  • 快手怎么艾特自己名字(快手怎么艾特自己关注的人)

    快手怎么艾特自己名字(快手怎么艾特自己关注的人)

  • 快手作者赞过怎么弄(快手作者赞过怎么弄教程)

    快手作者赞过怎么弄(快手作者赞过怎么弄教程)

  • 怎么设置后台运行

    怎么设置后台运行

  • 华为手环3pro和4区别(华为手环3pro和4pro哪个更好)

    华为手环3pro和4区别(华为手环3pro和4pro哪个更好)

  • 关于BIOS的入口地址0xFFFF0的介绍(bios设置的完整说法)

    关于BIOS的入口地址0xFFFF0的介绍(bios设置的完整说法)

  • 无线路由器指示灯都是什么?(无线路由器指示灯怎么才是正常)

    无线路由器指示灯都是什么?(无线路由器指示灯怎么才是正常)

  • 最贵的苹果电脑是什么(最贵的苹果电脑99万)

    最贵的苹果电脑是什么(最贵的苹果电脑99万)

  • 房产税如何申报流程
  • 息税前利润怎么算
  • 高新企业收到政府补贴怎么做账
  • 免税是不是不用交税
  • 已认证发票对方红冲应该怎么做账
  • 预缴所得税的计税依据
  • 进项税额销项税额月末需要结转吗
  • 公墓增值税政策
  • 研发费用扣除比例是百分75吗
  • 汇算清缴的利润表本期数与本年数
  • 修理办公用复印机好吗
  • 收到发票未付款可以抵扣吗
  • 收到法人的借款
  • 成本法和权益法大白话
  • 企业如何处理劳方与资方的关系
  • 劳保用品增值税税率是多少
  • 消费税怎样做分录
  • 跨年度取得发票会计分录
  • 司机出车补助会计科目
  • mac系统技巧
  • 电脑怎么搜索文档
  • 未开票收入缴纳所得税吗
  • 生产成本结转库存商品的数量
  • 弥补亏损需要注意的事项
  • wordpress functions.php
  • .info是什么意思?
  • 买房增值税征收标准
  • php strlen 中文
  • 增值税税率调整为13%的文件
  • 交暖气费可以开单位发票吗
  • php数独游戏代码
  • 购车的车辆购置税怎么交
  • 工程收到款项会计分录
  • 资产评估属于什么科目
  • 售后租回交易形成融资租赁,销售时不确认处置损益
  • 配件出口可以退税吗
  • 哪些情况进项税不可以抵扣?
  • 企业抵扣进项税条件
  • python中类方法有什么用
  • mongodb主从复制和副本集架构有什么联系和区别
  • 已抵扣增值税进项税额
  • 社会保险分割单怎么查
  • 退休返聘人员工伤怎么赔偿
  • 利润分配科目是所有者权益科目吗
  • 赠送的商品如何开发票
  • 计提的工会经费年底有余额咋处理
  • 抵账协议上可以签字吗
  • 分公司能
  • 增值税发票丢失罚款多少
  • 取得无形资产时增值税进项税额的处理
  • 没有销售怎么写总结
  • 委托销售产品如何做账
  • 4s店收取保险服务费合理吗
  • 递延所得税资产账务处理
  • mysql5.7配置文件my.ini
  • win8 开机启动
  • 系和系怎么区分
  • ubuntu12.04.5安装教程
  • Linux系统防火墙的命令
  • vmstat命令
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • 打开本地搜索
  • 运行ghost
  • win8引导盘
  • 双系统怎么转移文件
  • 使用NGUI发布报错的解决方案
  • 关闭iebrowser
  • js鼠标移入事件
  • django的工作原理
  • 用python写周字
  • 请问在javascript程序中
  • js复制对象的值
  • javascript 对象的this指向
  • jquery设置iframe的src
  • python函数详解
  • 加油站怎么收税
  • 云南地方税务局电话
  • 征求意见稿 讨论稿 送审稿
  • 各国进口汽车综合税率表
  • 内蒙民生认证系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设