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

news2024/11/24 3:51:55

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.coloradmin.cn/o/781436.html

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

相关文章

矿井人员视频行为分析算法 opencv

矿井人员视频行为分析算法通过opencvpython网络模型技术&#xff0c;矿井人员视频行为分析算法实时监测人员的作业行为&#xff0c;并与安全标准进行比对&#xff0c;可以及时发现不符合安全要求的行为&#xff0c;预防事故的发生。OpenCV的全称是Open Source Computer Vision …

json-server Node.js 服务,前端模拟后端提供json接口服务

json-server Node.js 服务,前端模拟后端提供json接口服务 背景&#xff1a; 前后端分离的项目&#xff0c;如果前端写页面的话&#xff0c;必须的后端提供接口文件&#xff0c;作为前端等待时间太久&#xff0c;不便于开发进行&#xff0c;如果前端写的过程中自己搭建一个简要的…

vue3+taro+Nutui 开发小程序(一)

前言&#xff1a;最近在调研开发小程序&#xff0c;发现现在taro框架逐渐成熟&#xff0c;能完美地使用vue3来进行开发&#xff0c;调研中发现京东的Nutui也不错所以准备写一个由0到1的vue3taroNutui的小程序。 这篇我们首先搭建一个框架&#xff1a; vscode插件准备环节&…

【C++详解】——异常

目录 C语言传统的处理错误的方式 C异常概念 异常的使用 异常的抛出和捕获 异常的重新抛出 异常安全 异常规范 自定义异常体系 C标准库的异常体系 异常的优缺点 C语言传统的处理错误的方式 传统的错误处理机制 终止程序&#xff0c;如assert。缺陷&#xff1a;用户难…

国产化测试工具的特色有哪些?

在软件开发和系统运维过程中&#xff0c;测试工具的选择和应用对于确保软件质量和系统稳定性至关重要。随着我国信息技术的快速发展&#xff0c;国产化测试工具以其独特的特色在市场上崭露头角。那国产化测试工具的特色有哪些&#xff1f; 一、技术创新&#xff1a; 适应多样化…

在英特尔 CPU 上微调 Stable Diffusion 模型

扩散模型能够根据文本提示生成逼真的图像&#xff0c;这种能力促进了生成式人工智能的普及。人们已经开始把这些模型用在包括数据合成及内容创建在内的多个应用领域。Hugging Face Hub 包含超过 5 千个预训练的文生图 模型。这些模型与 Diffusers 库 结合使用&#xff0c;使得构…

【Qt】安装Qt 5.7.1 MSVC2013 64bit版本的说明

【Qt】安装Qt 5.7.1 MSVC2013 64bit版本的说明 1、背景2、安装Qt 5.7.13、运行Qt Creator 1、背景 刚开始Qt是C库&#xff0c;后来Qt发展就越来越强大了。后来Qt 发展成为一套跨平台C图形用户界面应用程序开发框架。 注意它不但可以开发GUI程序&#xff0c;而且也可用于开发非…

【数据架构】Data Fabric 架构是实现数据管理和集成现代化的关键

D&A 领导者应该了解数据编织架构的关键支柱&#xff0c;以实现机器支持的数据集成。 在日益多样化、分布式和复杂的环境中&#xff0c;数据管理敏捷性已成为组织的任务关键优先事项。为了减少人为错误和总体成本&#xff0c;数据和分析 (D&A) 领导者需要超越传统的数据…

LangChain+LLM大模型问答能力搭建与思考

1. 背景 最近&#xff0c;大模型&#xff08;LLMs&#xff0c;Large Language Models&#xff09;可谓是NLP领域&#xff0c;甚至整个科技领域最火热的技术了。凑巧的是&#xff0c;我本人恰好就是NLP算法工程师&#xff0c;面临着被LLMs浪潮淘汰的窘境&#xff0c;决定在焦虑…

【趟坑记录】d3.zoom()的正确使用姿势 @d3.v7

【趟坑记录】d3.zoom()的正确使用姿势 d3.v7 文章目录 【趟坑记录】d3.zoom()的正确使用姿势 d3.v7问题重现原因分析解决方案放缩平移写法特殊修改transform函数的写法 总结 在开发一个D3应用的时候遇到了一个 zoom相关的问题&#xff0c;记录解决思路与方案 问题重现 最近在…

nodejs+vue+elementui学习交流和学习笔记分享系统

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。 前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进…

【Hello mysql】 mysql的事务

Mysql专栏&#xff1a;Mysql 本篇博客简介&#xff1a;介绍mysql的事务 mysql的事务 事务的概念事务功能测试事务的隔离级别如何理解隔离性&#xff08;粗浅理解&#xff09;隔离级别查看和设置隔离级别四种隔离级别详解读 -- 未提交读 - 提交可重复读串行化一致性的理解 总结 …

前端学习——ajax (Day4)

同步代码和异步代码 回调函数地狱和 Promise 链式调用 回调函数地狱 Promise - 链式调用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&quo…

python识别极验4滑块验证码实战

闲得无聊&#xff0c;趁着休息研究了一下极验4滑块验证码的安全性&#xff0c;是否有机器识别、自动化拖拽的可能性。首先看一下效果 如何识别验证码 1、下载图片 下载图片可以参考博客《采集极验4滑块验证码图片数据》 2、标记图片 3、标记滑动距离 实现代码 __author__ &…

算法与数据结构(二十一)前缀和数组差分数组

前缀和技巧适用于快速、频繁地计算一个索引区间内的元素之和。 1. 一维数组中的前缀和 先看一道例题&#xff0c;力扣第 303 题「区域和检索 - 数组不可变」&#xff0c;让你计算数组区间内元素的和&#xff0c;这是一道标准的前缀和问题&#xff1a; 题目要求你实现这样一个…

多线程(JavaEE初阶系列2)

目录 前言&#xff1a; 1.什么是线程 2.为什么要有线程 3.进程与线程的区别与联系 4.Java的线程和操作系统线程的关系 5.多线程编程示例 6.创建线程 6.1继承Thread类 6.2实现Runnable接口 6.3继承Thread&#xff0c;使用匿名内部类 6.4实现Runnable接口&#xff0c;使…

nodejs+vue+elementui学生选课系统awwm9

前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 可以设置中间件来响应 HTTP 请求。 (3) 教…

详细总结Webpack5的配置和使用

打包工具 使用框架&#xff08;React、Vue&#xff09;&#xff0c;ES6 模块化语法&#xff0c;Less/Sass 等 CSS预处理器等语法进行开发的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法&#xff0c;才能运行。 所以需要打包工具帮我们做完这些事。除此之…

微信小程序学习笔记(三)——视图与逻辑

页面导航 什么是页面导航 页面导航指的是页面之间的相互跳转。例如&#xff0c;浏览器中实现页面导航的方式有如下两种&#xff1a; <a> 链接location.href 小程序中实现页面导航的两种方式 声明式导航、 在页面上声明一个 <navigator> 导航组件通过点击 <…

R语言手动安装包

包安装问题解决方案 1. Biocmanager安装 2. 手动安装 文章目录 包安装问题解决方案前言一、Rstudio手动安装二、conda手动安装R包2.1 在Linux环境中使用R2.2 anaconda官网包下载 总结 前言 大家好✨&#xff0c;这里是bio&#x1f996;。点赞关注不迷路。在上一篇blog中为大家…