el-upload多文件上传_vue 界面

el-upload多文件上传_vue 界面vue使用element-ui的el-upload实现上传文件到后台的功能1.添加el-upload控件<el-upload:action=”action”:file-list=”modeList”:http-request=”modeUpload”><el-buttonsize=”small”type=”primary…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

vue 使用element-ui的el-upload实现上传文件到后台的功能


 1.添加el-upload控件

<el-upload
    :action="action"
    :file-list="modeList"
    :http-request="modeUpload"
>
    <el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button @click="upload">点击上传文件</el-button>
data() {
    return {
        action: 'https://jsonplaceholder.typicode.com/posts/',
        mode: {},
        modeList: []
    }
}

:action是必不可少但是却没什么作用的

:http-request可以覆盖默认的上传方法

el-upload多文件上传_vue 界面

 2.我配置的:action的值(就是官方文档示例的值)

action: 'https://jsonplaceholder.typicode.com/posts/'

3.:http-request函数内容,将上传成功的文件保存到mode里面,mode是自己在data里面定义的变量,初始值是mode:{}

modeUpload: function(item) {
      // console.log(item.file);
      this.mode = item.file
}

4.上传按钮的点击事件

upload: function() {
      let fd = new FormData()
      fd.append('templateFile', this.mode)
      axios.post('/api/reportRule', fd, {
         headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response.data);
      })
    },

5.上传成功,后台可以读取到数据

el-upload多文件上传_vue 界面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183864.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SecureCRT 中文(附上1.解决SecureCRT乱码问题2.解决Hostname lookup failed: host not found问题)[通俗易懂]

    secureCRT破解版是一款支持SSH1和SSH2的终端仿真程序,这个程序能够在windows系统中登陆UNIX或Linux的服务器主机并且还能进行管理设置,是一款非常强大的ssh传输软件,是用于连接运行包括Windows、UNIX和VMS的理想工具。并且它还有打印功能、可变屏幕尺寸、对不同主机保持不同的特性、颜色设置、自动注册等众多优秀的功能特色。同时还支持Telnet/SSH、TAPI、R…

  • 角度 弧度的转换_角度换算度分秒

    角度 弧度的转换_角度换算度分秒由数学关系已知 360度=2π弧度 =>180度= π*弧度 可证得一:1度=(π*弧度)/180 = 弧度/60 =>度=弧度*(π/180)   即60度=弧度*(60*π/180) 可证得二:1弧度=180/π=60度 =>弧度=度*(180/π) 即60弧度=度*(180/π)例1:cos(3

    2022年10月26日
  • POJ 1258 Agri-Net

    POJ 1258 Agri-Net

  • 电阻电容电感的常用标注方法(手机电容和电阻的区分)

    认识电容及电容电阻的标注   一、认识电容及电容的标注①电容的功能和表示方法。由两个金属极,中间夹有绝缘介质构成。电容的特性主要是隔直流通交流,因此多用于级间耦合、滤波、去耦、旁路及信号调谐。电容在电路中用“C”加数字表示,比如C8,表示在电路中编号为8的电容。②电容的分类。电容按介质不同分为:气体介质电容,液体介质电容,无机固体介质电容,有机固体介质电容电解电容。按极性分为:有极性电容和无极性电

  • angular基础面试题_java web面试题

    angular基础面试题_java web面试题angular用管道转换数据Angular为典型的数据转换提供了内置的管道,包括国际化的转换(i18n),它使用本地化信息来格式化数据。数据格式化常用的内置管道如下: DatePipe:根据本地环境中的规则格式化日期值。 DatePipe:Formatsadatevalueaccordingtolocalerules. UpperCasePipe:把文本全部转换成大写。 LowerCasePipe:把文本全部转换成小写。 LowerCasePipe:.

    2022年10月18日
  • NAT的双机热备方案

    一般的NAT组网中,内网用户通过单台设备进行NAT转换访问外网,NAT设备承担了所有内外网之间的流量,无法规避单点故障。一旦发生单点故障,将导致内网用户无法与外网通信。随着用户对网络可靠性的要求越来越高,发生单点故障导致网络间断是不可接受的。因此在重要节点处一般都部署两台或者多台设备,构成冗余备份组网,但如果设备之间不能实时的进行数据备份的话,链路切换时还是会导致用户的业务中断。双机热备方案可…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号