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

  • 一般纳税人开具的普票可以抵扣吗
  • 报税是怎么操作的
  • 税务异常有哪些类型
  • 应付股东现金股利通过什么核算
  • 原始凭证分类的目的是什么?
  • 小规模报企业所得税吗
  • 个税退税是公司退还是个人退
  • 所得税的利润总额怎么计算
  • 数量金额式明细账模板
  • 外商投资企业土地使用税什么时候交
  • 会计凭证可分为哪三类
  • 借款到期一直付利息诉讼期怎么算
  • 冲账其他应付款
  • 商品已发出未开票未收款怎么做账
  • 购进货物的价税怎么算
  • 研发部门领用材料会计分录
  • 地质灾害评估费收费标准
  • 公司为什么要员工提供房产证
  • 公司注销后虚开发票
  • 税收编码选错了,发票已经开出去几个月了,还有影响吗
  • 从2017年7月1日起到现在多少天
  • 房产税计税依据房产原值怎么算
  • 特殊建造行业
  • 三证合一号码是纳税人识别号吗
  • 其他公司代付工资怎么做
  • 开票系统问题
  • 税控盘逾期未抄报,交罚款需要带什么
  • 折扣销售怎么确认
  • 上级拨入资金计入什么科目
  • 投资理财产品的优势和劣势
  • 剑灵怎么截图正版
  • 苹果推送改不掉三全音
  • macOS Big Sur 11.3 开发者预览版/公测版 Beta 6正式发布
  • 未结算未取得发票怎么办
  • php 实例
  • 招标单位收取标书费多少钱
  • 职工福利费开支超过准予扣除标准的金额为1.2
  • 交易性金融资产入账价值怎么计算
  • 预收账款属于什么科目
  • 公司购买购物卡送客户的会计分录
  • 个体户个税征收标准
  • 一般人转小规模政策文号
  • 接待客人的场合
  • 理财收益 投资收益
  • 报销货物运输费需要什么凭证
  • 无形资产资产处置损益怎么算
  • 现金周期和经营周期的计算公式
  • 什么叫网银盾账户
  • 新《准则》适用对象为
  • 小规模纳税人企业所得税2023
  • 资本公积含义
  • 借管理费用贷应交税费个人所得税
  • 本月暂估入库,下月
  • 附加税减半征收从什么时候开始
  • 国家退税计入什么科目
  • 折扣 会计
  • 研发费用如何做分录分析
  • sqlserver存储过程怎么查看
  • SQLSERVER 中datetime 和 smalldatetime类型分析说明
  • 创建mysql数据库指定字符集
  • win10图片修改
  • Windows Server 2008网络安全与终端服务
  • win8安全模式黑屏
  • win10怎么关闭防火系统
  • 1.cpp执行的是什么文件
  • 解决win10蓝屏
  • 家用电脑是什么机型
  • linux mangle
  • qt渲染引擎
  • node 全局安装
  • AJAX和jQuery动态加载数据的实现方法
  • 常用的八种教学方法
  • javascript定律
  • 熟悉的拼音
  • python跑出异常
  • unity networking
  • 小微企业契税政策
  • 美国买东西邮寄怎么寄
  • 重庆市国税电子税务局
  • 小规模企业降税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设