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 界面

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • js中倒计时_js倒计时特效

    js中倒计时_js倒计时特效利用setInterval制作简单的js倒计时,点击按钮将触发定时器且按钮不可用html:获取校验码JS: vari; functiongetCode(){ $(“#code”).attr({“disabled”:”disabled”}); i=self.setInterval(“countdown()”,1000); } varint=1

    2022年10月4日
    0
  • python 3Des 加密

    python 3Des 加密

    2021年11月29日
    47
  • A4988与42步进电机

    A4988与42步进电机A4988电机驱动板引脚VMOT:电源正(8~35V),供电机GND:电机接地2B,2A:电机绕组2控制引脚1A.1B:电机绕组1控制引脚VDD:驱动板电源正(3~5V)GND:驱动板地ENABLE:引脚低电平,A4988才能进行电机驱动工作(悬空为默认状态,可以正常工作),高电平,A4988将不会经行电机驱动工作MS1,MS2,MS3:用来改变驱动模式具体如图REST:低电平…

    2022年6月15日
    40
  • 2017年04月19日

    2017年04月19日

    2021年9月19日
    55
  • DVWA-PHP function allow_url_include: Disabled错误

    DVWA-PHP function allow_url_include: Disabled错误参考网址:https://stackoverflow.com/questions/34274492/dvwa-setup-php-function-allow-url-include-disabled/34540293在进行DVWA的配置时出现了PHPfunctionallow_url_include:Disabled错误,错误如下。系统给的错误提示是这样…

    2022年7月21日
    33
  • MATLABfill函数_matlab中C的模块名称是什么

    MATLABfill函数_matlab中C的模块名称是什么matlab移植C/C++代码时,发现不管是opencv还是IPP库都没有填充联通区域函数imfill(),于是只能自己动手了。先展示一下imfill()函数的功能,如下图:上图中,左图是一个二值图像,白色是手臂边缘像素值为1,黑色区域像素值为0,现在想将手臂填充1,用imfill()函数可以实现该功能,但C/C++代码需要自己实现。C/C++代码:boolimFill(Ipp8u*img,intwidth,intheight){ vector<int>q; int

    2022年9月12日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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