vue[el-table]表格内附件上传、elementui 的http-request 上传附件,并且还可以传参数

2023-11-10

解决:通过http-request

 <el-upload
    class="upload-demo"
    action=""
    :headers="importHeaders"
    :http-request="(file)=>{return imggreySuccess(file ,scope.row)}"
    multiple
    :limit="3"
    :file-list="fileList"
  >
<el-button size="small">
  点击上传
</el-button>
<div slot="tip" class="el-upload__tip">
  可上传多个附件,且每个附件不超过2M
</div>

在这里插入图片描述

methods: {
    imggreySuccess(params, row) {
      const isLt2M = params.file.size / 1024 / 1024 < 2

      // 通过 FormData 对象上传文件
      var formData = new FormData()
      formData.append('file', params.file)
      // formData.append('FileName', params.file.name)
      if (!isLt2M) {
        this.$message.error('请上传2M以下的文件')
        return false
      }
      // 设置header
      this.importHeaders['X-AUTH-TOKEN'] = Cookies.get('X-AUTH-TOKEN') // token
      this.upLoadData.fileType = `winBidNoticeAttachment_${row.typecode}`// 文件类型
      axios.post(`${this.upLoadFileUrl}${createURL(this.upLoadData)}`, formData, { headers: { 'X-AUTH-TOKEN': Cookies.get('X-AUTH-TOKEN') }})
        .then(function(res) {
        })
        .catch(function(err) {
          console.error(err)
        })
      // 校验是否每条数据至少有一条数据 数据整理
      // const fileObj = Object.assign(file)
      // this.fileLists = this.performanceData
      // this.fileLists.map(item => {
      //   if (item.typecode === row.typecode) {
      //     this.arrBuff.push(fileObj)
      //     item.arr = this.arrBuff
      //     return
      //   }
      // })
    }
}

就解决上传传参的问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue[el-table]表格内附件上传、elementui 的http-request 上传附件,并且还可以传参数 的相关文章

  • PAT 1015 德才论 (25分) C语言实现

    1015 德才论 25分 宋代史学家司马光在 资治通鉴 中有一段著名的 德才论 是故才德全尽谓之圣人 才德兼亡谓之愚人 德胜才谓之君子 才胜德谓之小人 凡取人之术 苟不得圣人 君子而与之 与其得小人 不若得愚人 现给出一批考生的德才分数 请
  • 将文件或目录移动到另外的目录

    File or directory to be moved File file new File filename Destination directory File dir new File directoryname Move fil
  • Flutter编译卡在Running Gradle task ‘assembleDebug‘

    为什么卡在这一步 把网络断开 发现了问题 卡在了下载运行环境和依赖库的步骤 jcenter 下载速度太慢 知道原因就好办了 需要修改3个地方 1 首先找到fultter sdk所在文件夹的位置 依次进入 flutter packages f

随机推荐

  • 单端口RAM实现FIFO

    RAM分类 单口ram 单端口RAM只有一组数据线和一组地址线 只有一个时钟 读写共用地址线 输出只有一个端口 所以单端口RAM的读写操作不能同时进行 当wea拉高时 会将数据写入对应的地址 同时douta输出的数据与此时写入的数据是一致的
  • STC32G12K128内部集成的I2C总线实现oled12864显示

    STC32G 系列的单片机内部集成了一个 I2C 串行总线控制器 I2C 是一种高速同步通讯总线 通讯使用 SCL 时钟线 和 SDA 数据线 两线进行同步通讯 对于 SCL 和 SDA 的端口分 STC32G 系列的单片机提供了切换模式
  • springboot+mybatisplus 动态切换数据源——数据库(通过AOP获取head参数动态切换)

    写这个博客 是记录一下自己的学习过程 因为网上信息杂乱不清 所以此博客只做记录和分享作用 参考博客链接 https blog csdn net QiuHaoqian article details 120479890 再此基础上修改了一些
  • sqli-labs/Less-30

    首先判断一下是否为数字型注入 输入如下 id 1 id 1 and 1 2 回显如下 正确回显了 说明属于字符型注入 然后在判断是属于单引还是双引 输入1 回显如下 正确回显 再试一试双引号 输入1 回显如下 这告诉我们两件事情 1 这属于
  • Git 命令大全「全面且实用,值得收藏」

    用了这么久的 git 工具 中途也使用过 SourceTree 但是最后发现 还是代码香啊 虽然之前也写过一篇学习笔记 Git教程学习笔记和填坑总结 以及 SourceTree 工具的使用 但是感觉那篇还是笔记冗余 看起来不是很明确 所以
  • 利用docker来部署自己的项目

    在部署自己项目时 开始时一头雾水 如果直接放在服务器上跑 既麻烦又不稳定 后来看到有写采用docker进行项目部署 前后折腾了一天 总算部署上去了 分享出来让大家少走点弯路 整体的流程大概是这样的 首先 准备环境 需要在本地部署docker
  • 在R中线性回归分析的函数是lm()

    在R中线性回归分析的函数是lm 1 一元线性回归 我们可以根据以上数据来分析合金的强度是否与碳含量有关系 首用以下命令把数据读取到R中 x lt c seq 0 10 0 18 by 0 01 0 20 0 21 0 23 y lt c 4
  • JS格式化日期

    JS格式化日期真是件淡疼的事 网上转了半天终于发现有一个挺不错的函数 贴上来做个笔记 时间对象的格式化 Date prototype format function format format yyyy MM dd hh mm ss var
  • cmake命令之使用静态库(include_directories,link_directories,target_link_directories)

    include directories的命令形式如下 include directories AFTER BEFORE SYSTEM dir1 dir2 link directories的命令形式如下 link directories AF
  • Data collection (imaging)

    Now that we ve talked about sample prep let s talk about imaging 0 05 In a single particle project the images can either
  • LeetCode左程云算法课笔记

    左程云算法课笔记 剑指Offer 位运算 运算符理解 寻找出现双中的单数 取出一个数最右边1的位置 找所有双出现中的两个单数 整数二进制奇数位偶数位交换 数组中全部出现k次返回出现一次的数 链表 判读链表元素是否回文 利用栈结构 利用栈结构
  • 解决VS打不开xxx.ui文件,xxx.ui无法打开文件

    目录 场景复现 解决方案 场景复现 在使用vs进行开发时 居然无法打开qt的ui文件 这本质上是因为找不到designer exe的路径 解决方案 1 右击ui文件 然后选择打开方式 2 点击右侧的添加按钮 3 点击程序后面的 按钮选择合适
  • PCIe专题学习——4.0(物理层结构解析)

    之前我们讲了对PCIe的一些基础概念作了一个宏观的介绍 了解了PCIe是一种封装分层协议 packet based layered protocol 主要包括事务层 Transaction layer 数据链路层 Data link lay
  • Java相关注解

    标题 TableField Mybatis plus使用注解 TableField exist false 注明非数据库字段属性 TableField exist false 注解加载bean属性上 表示当前属性不是数据库字段 但项目中必须
  • vue3 父子组件传参详解

    前言 我引用了大佬的文章 但我实在找不到网址链接了 我记录在笔记上的 如果大佬看见了 麻烦给我说一下 我注明一下出处 建议先看son vue 里面写了那三种方式 首先放一个我的demo defineProps什么的父子传参api不用引入 直
  • 06 科技英语|控制与优化学科词汇

    maneuver n 策略 v 操控 调遣 manipulate vt 熟练控制 scalability n 可扩展性 leverage n 杠杆 v 促使 改变 flexibility n 弹性 dispatch n 急件 v 调度 派遣
  • extern关键字的用法知识点总结

    extern关键字的用法 编译C文件的步骤 数据类型及其长度 知识点总结 一 extern关键字的用法 extern关键字可以用来声明变量 函数作为外部变量或者函数供其它文件使用 extern表明变量或者函数是定义在其他其他文件中的 例如
  • 《Python编程:从入门到实践》第九章练习题

    Python编程 从入门到实践 第九章练习题 Python编程 从入门到实践 第九章练习题 9 1 餐馆 9 2 三家餐馆 9 3 用户 9 4 就餐人数 9 5 尝试登录次数 9 6 冰淇淋小店 9 7 管理员 9 8 权限 9 9 电瓶
  • python+selenium+PhantomJS爬取唯品会

    由于唯品会是利用js动态生成html作为反爬机制 所以不能用以前的爬取html的方法进行爬取 本程序是用selenium PhantomJS对唯品会进行爬取 可以根据需要输入要爬取的商品 还有爬取的起始页和结束页 程序代码以及注释的内容如下
  • vue[el-table]表格内附件上传、elementui 的http-request 上传附件,并且还可以传参数

    解决 通过http request