【框架】上传文件【框架】上传文件

96 阅读 0 评论 64 点赞

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

【框架】上传文件

在这里插入图片描述

思考

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

处理

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
export const UploadExcel = ({file,fn}) => {//上传接口
    return API({
        url:'/api/',
        method: 'POST',
        data:file,
      	onUploadProgress:fn,//axios的监听上传进度的回调
        headers:{
            "Content-Type":"multipart/form-data"
        },
    })
}

调用示例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)
  })
}