el-upload多文件上传_vue 界面

全栈程序员站长

发布于 2022-09-27 11:02:31

7370

发布于 2022-09-27 11:02:31

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可以覆盖默认的上传方法

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