element ui 上传控件携带参数到后端

1.携带固定参数:

2.携带不固定参数: 

       <el-row> 
        <el-col :span="24">
          <el-upload
            :multiple="false"
            :show-file-list="false"
            :on-success="f_handleImageSuccess"
            :before-upload="f_HandleImageBefore"
            drag
            action=""
            :http-request="f_handleUploadForm"
            :auto-upload="true"
            :headers="importHeaders"
          >
            <i class="el-icon-upload" style="margin:10px 0px 0px 0px;" />
            <div class="el-upload__text">
              <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/et文件,且不超过200MB</div>
            </div>
          </el-upload>
        </el-col> 
      </el-row>

 // 文件格式及文件大小验证
    f_HandleImageBefore(file) {
      let isJPG = false;
      if (file.name.indexOf('.xls') > -1 || file.name.indexOf('.xlsx') > -1 || file.name.indexOf('.et') > -1) { isJPG = true; }
      let isLt2M = file.size / 1024 / 1024 < 200;
      if (!isJPG) {
        this.$message.error('上传文件只能是XLS/XLSX/ET格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 200MB!');
      }
      return isJPG && isLt2M;
    },
    f_handleImageSuccess(file) {
      this.meternos = '';
      if (file.success) {
        this.$message({ showClose: true, message: '附件上传成功!', type: 'success' }); 
            // this.$emit('queryList');        
      } else {
        this.$message({ showClose: true, message: file.message, type: 'error' });
      }
    },
    // 上传并携带参数
    f_handleUploadForm(param)
    {
      let formData = new FormData()
      // 在formData中加入我们需要的参数
      formData.append('file', param.file) //上传的文件
      formData.append('poid', this.fileUpload.poid) //参数:出库单号
        formData.append('type', this.fileUpload.type) //参数:类型
      api_StockOutOverdueUploadFile(formData).then((response) => {
          if (response.success === true) {
            this.$message({ showClose: true, message: '附件上传成功!', type: 'success' }); 
          }
        });
    }
 

 

  • js里面的请求方法:
  • //附件上传
    export function api_StockOutOverdueUploadFile(data) {
      return request({
        url: '/maobao.mom.wms/v' + apiversion + '/purchaseorderdetail/StockOutOverdueUploadFile',
        method: 'post',
        data
      });
    }
     

 

 

        [HttpPost, Route("StockOutOverdueUploadFile"), SwaggerFileUpload]
        [DisableRequestSizeLimit]
        public async Task<IActionResult> StockOutOverdueUploadFile()
        {
            //获取所有上传文件
            var files = Request.Form.Files;// 接收上传文件
            var poid = Request.Form["poid"].ToString();//接收传递的参数:出库单号
            var type = Request.Form["type"].ToString();//接收传递的参数:类型
        }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ShardingSphere分库分表实战之MySQL主从集群搭建

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…

Java并发编程学习笔记(一)线程的入门与创建

一、进程与线程 认识 程序由指令和数据组成&#xff0c;简单来说&#xff0c;进程可以视为程序的一个实例 大部分程序可以同时运行多个实例进程&#xff0c;例如记事本、画图、浏览器等少部分程序只能同时运行一个实例进程&#xff0c;例如QQ音乐、网易云音乐等 一个进程可以…

【C++进阶之路】适配器、反向迭代器、仿函数

文章目录 前言一、适配器①模拟实现栈②模拟实现对列 二、反向迭代器三、仿函数总结 前言 我们先来笼统的介绍一下今天的三个内容。 适配器——简单的理解就是复用&#xff0c;用已经实现的轮子&#xff0c;来继续实现某种功能。 反向迭代器——原理很简单&#xff0c;就是对…

摄影测量-共线方程、共面方程

1、共线方程 在摄影测量中&#xff0c;绝大多数的结算方法都是基于共线条件方程式的&#xff0c;如单片空间后方交会解法、像对空间前方交会解法、光束法区域网评查以及直接线性变换等。 2、共面方程 描述像片对内摄影基线以及同名光线位于同一平面的一种条件方程。在摄影测量…

分表后mybatis-plus删除操作失效等问题处理

因为重构dao层&#xff0c;问题太多了&#xff0c;于是想着另起一个章节。 4 count的问题 使用count复用&#xff0c;不需要查询所有字段&#xff0c;否则会出现下面的错误 ### SQL: SELECT COUNT( t.id,t.company_id,t.user_id,t.bind_time,t.role_type,t.job_type,t.studen…

openSUSE leap 15.3安装mysql-community-server

openSUSE Software 下载"https://software.opensuse.org/ymp/home:bjoernv/15.3/mysql-community-server.ymp" wget "https://software.opensuse.org/ymp/home:bjoernv/15.3/mysql-community-server.ymp" 双击"mysql-community-server.ymp" 添…

【算法基础:搜索与图论】3.2 树与图的dfs和bfs

文章目录 例题846. 树的重心&#xff08;深度优先遍历 / 树形DP&#xff09;⭐⭐⭐⭐⭐&#x1f6b9;&#x1f6b9;&#x1f6b9;&#x1f6b9;&#x1f6b9;&#xff08;重要&#xff01;好题&#xff01;&#xff09;847. 图中点的层次 相关链接 要学会建树、建图的通用方法。…

【Matlab】基于遗传算法优化 BP 神经网络的数据回归预测(Excel可直接替换数据)

【Matlab】基于遗传算法优化 BP 神经网络的数据回归预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理2.文件结构3.Excel数据4.分块代码4.1 arithXover.m4.2 delta.m4.3 ga.m4.4 gabpEval.m4.5 initializega.m4.6 maxGenTerm.m4.7 nonUnifMutation.m4.8 normGeomSel…

为harbor仓库添加https,新增DigiCert 免费版SSL证书

完成效果&#xff1a; 前言&#xff1a;在本地搭建好docker的镜像仓库harbor后&#xff0c;当我们登录docker login时&#xff0c;会提示证书问题x509: cannot validate certificate 登录本地报错X509 无法登录仓库也无法上传和拉取镜像&#xff0c;虽然有本机的解决方法&…

300M的联通宽带,电脑直接连接光猫只有100M;电脑连接路由器,然后路由器连接光猫却有300M???

1. 现象 300M的联通宽带&#xff0c;用了小半年之后发现网络比以前满&#xff0c;通过https://www.speedtest.cn网站测试发现只有100M 2. 猜测 难道是联通这帮人&#xff0c;偷偷把我网速降到了100M&#xff1f;&#xff1f;&#xff1f; 3. 排查过程 打电话让联通师傅上门排查…

Windows下YUICompress实现js、css混淆压缩

首先&#xff0c;我们针对Linux下的部分命令进行Windows系统的对应实现 ls————cmd /c dir/b rm————cmd /c del mv————cmd /c move pwd————cmd /c chdir 注&#xff1a;cmd /c是执行完命令后关闭命令行窗口、cmd /k是执行完命令后不关闭命令行窗口、cmd /c sta…

归并排序与计数排序

目录 一、归并排序 1.基本思想 2.归并排序的特性总结&#xff1a; 3.代码实现&#xff1a; 4.代码优化 &#xff1a; 二、计数排序&#xff08;非比较排序&#xff09; 1. 概念&#xff1a; 2.计数排序的特性总结&#xff1a; 3.代码实现&#xff1a; 一、归并排序 1.…

香农极限是如何影响光纤容量的

1 引言 上世纪末&#xff0c;DWDM技术开始在干线通信中使用并迅速普及。虽然当时DWDM系统的容量只有402.5G&#xff0c;但实验室中DWDM支持的波道数甚至超过了1000波&#xff0c;单波道速率也飙到了惊人的160G&#xff08;超1000波和单波160G是两个独立事件&#xff09;。人们普…

自定义类型:结构体进阶学习分享

自定义类型&#xff1a;结构体进阶学习分享 前言1 结构体的基础知识2 结构的声明3 特殊声明4 结构的自引用5 结构体变量的定义和初始化6 结构体内存对齐6.1 计算结构体大小相关笔试题&#xff08;基于VS&#xff09;笔试题一&#xff1a;笔试题二&#xff1a; 6.2 为什么存在内…

FFmpeg 命令行实现居中高清上下模糊播放效果

FFmpeg 命令行实现居中高清上下模糊播放效果。 1、16:9 的横屏原视频&#xff0c;以 16:9 竖屏上下模糊播放 以该效果播放视频的命令如下&#xff1a; ffplay -i horizontal_test_video_169.mp4 -vf \ "split[a][b]; \ [a]crop(ih/16*9):ih,scaleiw/10:-1,gblursigma5…

深度理解 Spring AOP

一、什么是AOP(面向切面编程)&#xff1f;&#x1f349; AOP 为 Aspect Oriented Programming 的缩写&#xff0c;意思为面向切面编程&#xff0c;是通过预编译方式 和运行期 动态代理 实现程序功能的统一维护的一种技术。 AOP &#xff08;面向切面编程&#xff09;是 OOP&a…

代码随想录额外题目| 数组02 ●189旋转数组 ●724寻找数组中心索引

#189旋转数组 很快写出来但是用了个新数组&#xff0c;不好 void rotate(vector<int>& nums, int k) {vector<int> res(nums.size(),0);for(int i0;i<nums.size();i){int newiik;if(newi>nums.size()-1) newinewi%nums.size();res[newi]nums[i];}numsr…

vue组件(个人学习笔记三)

目录 友情提醒第一章、vue的组件1.1&#xff09;什么是SPA应用1.2&#xff09;vue的组件简介1.3&#xff09;vue工程中的main.js文件 第二章、Vue组件的使用2.1&#xff09;一般组件的自定义2.2&#xff09;注册组件&#xff1a;全局注册和局部注册2.2.1&#xff09;全局注册&a…

和chatgpt学架构04-路由开发

目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转&#xff0c;其中路由配置是必不可少的&#xff0c;我们在做开发的时候&#xff0c;先需要了解知识点&…

Vue--》打造个性化医疗服务的医院预约系统(二)

今天开始使用 vue3 + ts 搭建一个医院预约系统的前台页面,因为文章会将项目的每一个地方代码的书写都会讲解到,所以本项目会分成好几篇文章进行讲解,我会在最后一篇文章中会将项目代码开源到我的GithHub上,大家可以自行去进行下载运行,希望本文章对有帮助的朋友们能多多关…