【框架】上传文件

思考

一般上传文件的组件，都会让你填写上传的地址，无论是你二次封装，还是使用已有组件，都需要在组件上填写起码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)
  })
}

最后

以上就是光亮山水为你收集整理的【框架】上传文件【框架】上传文件的全部内容，希望文章能够帮你解决【框架】上传文件【框架】上传文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。