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

时间:2021-6-11 作者:qvyue

之前做上传,参考element UI的官方示例,使用action属性,action是上传的地址。
这次做的项目,换了一个后端对接,说,上传不需要调用接口,我懵了,我寻思示例不都是使用了action嘛,经过一番了解,upload组件还提供了http-request覆盖默认上传行为。

elementUI 的upload组件的http-request方法的使用

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

http-request有个默认的参数:content
content是一个object对象:里面包含一些upload组件的回调方法,可以使用upload组件原生的方法。

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

下面记录下具体使用方法,很简单
1、

上传点击上传文件
data() {
    return {
        action: 'https://jsonplaceholder.typicode.com/posts/',
        mode: {}
    }
}

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

vue 使用element-ui的el-upload httprequest实现上传文件到后台的功能
image.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。