ElementUI重写Upload组件

发布于 / 笔记 / 0 条评论 / 156 条浏览

在项目中,往往会出现用户登陆后才能上传文件的场景,但是在ElementUI中默认使用action的接口来上传,不能够满足我们的需求

ElementUI也提供了覆盖默认上传文件的方法

具体实现方法

我们只需要加入http-request属性

<el-upload ref="idNumberImg" :file-list="idNumberImgfileList" :action="idNumberImgAction"
                         :before-upload="idNumberImgBeforeUpload" :http-request="idNumberImgRequest" list-type="picture-card" accept="image/*" name="idNumberImg">
    <i class="el-icon-plus"></i>
</el-upload>

method

idNumberImgRequest(params){
      const _file = params.file
      let param = new FormData()
      param.append('idNumberImg', _file)
      idNumberImgUpLoad(param).then(response => {
        console.log(response)
      })
    }

api

export function idNumberImgUpLoad(data) {
  return request({
    baseURL: url,
    url: `/system/upload`,
    method: 'post',
    data,
    headers:{
    'Content-Type':'multipart/form-data'
   }
  })
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注