我是靠谱客的博主 光亮山水,这篇文章主要介绍【框架】上传文件【框架】上传文件,现在分享给大家,希望可以做个参考。

【框架】上传文件

在这里插入图片描述

思考

一般上传文件的组件,都会让你填写上传的地址,无论是你二次封装,还是使用已有组件,都需要在组件上填写起码1次以上上传文件的接口地址,这样就不利于前端代码的接口统一调用,而且在一段时间或再进行项目修改,容易遗忘。

处理

索性将上传文件的接口和上传的文件的view彻底分开
接口封装内容:【框架】axios封装(接口)
**
接口示例:

export const UploadExcel = ({file,fn}) => {//上传接口
    return API({
        url:'/api/',
        method: 'POST',
        data:file,
      	onUploadProgress:fn,//axios的监听上传进度的回调
        headers:{
            "Content-Type":"multipart/form-data"
        },
    })
}

调用示例:

let Input=document.createElement('input');//js生成接收文件的DOM
Input.type="file";
Input.click()
Input.onchange=(e)=>{
  let formData = new FormData();
  formData.append("file",e.target.files[0]);
  UploadExcel({
    file:formData,
    progress:(e)=>{//进度回调,用来监听文件上传进度
  		//这里控制渲染上传进度的属性
  	}
  }).then(data=>{
    this.$message.success('导入成功!')
    this.GetTableList();
  }).catch(res=>{
    this.$message.error(res.message)
  })
}

最后

以上就是光亮山水最近收集整理的关于【框架】上传文件【框架】上传文件的全部内容,更多相关【框架】上传文件【框架】上传文件内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(42)

评论列表共有 0 条评论

立即
投稿
返回
顶部