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

  • excel数据分析在哪里(如何学做数据分析)

    excel数据分析在哪里(如何学做数据分析)

  • 抖音删作品影响权重吗(抖音删除作品影响)

    抖音删作品影响权重吗(抖音删除作品影响)

  • 电脑开麦对方听不到(电脑开麦对方听不到声音)

    电脑开麦对方听不到(电脑开麦对方听不到声音)

  • 小寻电话手表怎么绑定(小寻电话手表怎么下载软件)

    小寻电话手表怎么绑定(小寻电话手表怎么下载软件)

  • 小米手机坏了怎么导出照片(小米手机坏了怎么导出数据)

    小米手机坏了怎么导出照片(小米手机坏了怎么导出数据)

  • 小米10超广角怎么用(小米超广角怎么打开)

    小米10超广角怎么用(小米超广角怎么打开)

  • 滴滴预付车费取消订单什么时候退(滴滴预付车费取消订单退款多久到账)

    滴滴预付车费取消订单什么时候退(滴滴预付车费取消订单退款多久到账)

  • 信息发出去了删除对方能看到吗(信息发出去删除微信能看到吗)

    信息发出去了删除对方能看到吗(信息发出去删除微信能看到吗)

  • 华为Nova5怎样设置呼叫转移(华为nova5怎样设置锁屏图片)

    华为Nova5怎样设置呼叫转移(华为nova5怎样设置锁屏图片)

  • macbookpro运行虚拟机需要多少内存(macos 1080p 虚)

    macbookpro运行虚拟机需要多少内存(macos 1080p 虚)

  • 青桔单车怎么关锁(青桔单车怎么关闭自动续费)

    青桔单车怎么关锁(青桔单车怎么关闭自动续费)

  • 微信收款助手怎么开启(微信收款助手怎么开通下单助手)

    微信收款助手怎么开启(微信收款助手怎么开通下单助手)

  • 华为怎么返回上一步(华为怎么返回上一个版本)

    华为怎么返回上一步(华为怎么返回上一个版本)

  • 为什么我的快手没有置顶(为什么我的快手没有亲密关系)

    为什么我的快手没有置顶(为什么我的快手没有亲密关系)

  • ps怎么预设图案(ps预设图案怎么导出)

    ps怎么预设图案(ps预设图案怎么导出)

  • vivo手机otg使用教程(vivo手机怎么用)

    vivo手机otg使用教程(vivo手机怎么用)

  • 手机淘宝生日在哪设置(手机淘宝生日在哪里设置)

    手机淘宝生日在哪设置(手机淘宝生日在哪里设置)

  • airpods丢了怎么定位(airpods丢了怎么定位盒子)

    airpods丢了怎么定位(airpods丢了怎么定位盒子)

  • beoplay中文叫什么(beoplayer中文)

    beoplay中文叫什么(beoplayer中文)

  • mate30pro多少倍变焦(华为mate30pro最大多少倍变焦)

    mate30pro多少倍变焦(华为mate30pro最大多少倍变焦)

  • 华为fig一al00是什么型号(华为fig-al00什么型号)

    华为fig一al00是什么型号(华为fig-al00什么型号)

  • 小度在家控制电视步骤(小度在家控制电脑开关机)

    小度在家控制电视步骤(小度在家控制电脑开关机)

  • 指定的网络名不再可用介绍(指定的网络名不再可用 共享打印机00x0000040)

    指定的网络名不再可用介绍(指定的网络名不再可用 共享打印机00x0000040)

  • 企业所得税核定征收税率表最新
  • 电子缴税付款凭证怎么做账
  • 车辆保险的车船税怎么算
  • 增值税有哪几类
  • 房屋契税缴纳比例
  • 应交税费是什么科目
  • 小规模销售免税农产品的分录
  • 住宿税率是多少 5%
  • 广告策划费会计分录
  • 转让旧房增值税计税依据
  • 报销交通费的会计怎么做
  • 已抵扣进项怎么转出
  • 房地产企业销售未完工产品预计毛利率
  • 农业企业土地租赁费账务处理
  • 申办企业所得税抵缴带哪些资料?
  • 公对公转账需要多久到账
  • 建筑企业发生的招标代理费一般计入
  • 财务软件里面可以修改吗
  • 计提税金和缴纳税金的会计分录
  • 物业公司的跨期收费如何确认收入?
  • 税务异常不处理会的后果
  • 土地转让应交税费
  • 无法访问您可能没有权限使用资源
  • 银行存款收款凭证属于什么凭证
  • 不良资产购买流程
  • 职工教育经费包括餐费吗
  • 没有车船税可以检车吗
  • mysql输入中文显示乱码
  • Mac苹果系统怎么转换中文
  • 小规模纳税人进口增值税怎么处理
  • 进口应税消费品的组成计税价格公式
  • 哪些合同不属于担保合同
  • 升级nodejs到最新版本
  • linux信号的本质
  • vue3.0 vite
  • php使用curl
  • 文化事业建设费的征收范围
  • 已认证发票对方作废后不重开怎么办
  • 差旅费的处理
  • 单位全额承担社保能税前扣除吗
  • 研发费用的台账由谁做
  • 生产过程中产品质量问题
  • 现金存银行凭证
  • 暂估入库成本差异
  • 保险发票计入什么科目
  • 预付货款属不属于消费信用
  • 如何理解股权激励
  • 刻章发票可以抵扣吗
  • 没有期初数据如何建账
  • 不固定参数的存储器
  • MSSQL SERVER 2005 数学函数整理
  • freebsd使用wifi
  • 升级完鸿蒙系统5G咋没有了
  • yum更新所有软件
  • 联想昭阳k41笔记本
  • ubuntu下安装QT教程
  • bash.exe
  • smsmon32.exe - smsmon32是什么进程
  • 强缓存标志
  • linux ids
  • linux的curl
  • win7系统怎么设置浏览器主页
  • 怎么恢复手机桌面时间和日期
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • 并行执行的符号
  • Python通过DOM和SAX方式解析XML的应用实例分享
  • unity怎么创建空对象
  • angularjs教程
  • android view动画
  • shell脚本编程实验报告
  • [置顶]马粥街残酷史
  • js禁用页面所以输入框
  • 安卓手机加速方法
  • 个税申报系统如何增加新单位
  • 小规模现代服务的税率是多少啊怎么算
  • 注销税务说明
  • 税局实地调查准备什么
  • 自然人扣缴客户端重新安装后信息怎么同步
  • 耕地占用税林地有减免吗
  • 海关进口增值税怎么认证抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设