2025年el-upload多文件上传_vue 界面

编程汇总 • 2025-03-06 22:51 • 阅读 20

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

----

1.添加el-upload控件


    :action="action"

    :file-list="modeList"

    :http-request="modeUpload"

>

    上传



点击上传文件

data() {

    return {

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

        mode: {},

        modeList: []

    }

}

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

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

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.上传成功，后台可以读取到数据

2025年el-upload多文件上传_vue 界面

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

相关推荐