vue+element-ui+axios实现上传图片进度条效果

要下班了，写点啥

• 首先封装axios，然后在需要的页面 引入（在此采用）

• 也可以不封装的，直接使用

• template如下 ;使用http-request 覆盖默认上传行为

                  
                    
                    
                  
                  
                  
                    
                  
                  {{jdt}}
                

• 请求方法

import request from '@/utils/request'
				// ---上传附件
export function uploadFile(data,callback){
    return request({
        url:'xxxx/upload',
        method:'post',
        data,
        ContentType: 'multipart/form-data',
        onUploadProgress: ProgressEvent => {//重点就是这个方法
            if(ProgressEvent.lengthComputable){//此判断的目的 根据意思就能知道了，可计算长度lengthComputable，值为true  时，ProgressEvent.total  才有效
                callback && callback(ProgressEvent)
            }
        }
    })
}

• 发送请求

	const formData = new FormData();
      formData.append('file',file)
      formData.append('type',data.type)；//我自己的图片类型
      uploadFile(formData,(e) => {
         this.jdt = e.loaded/e.total*100;
         //jdt   进度条 数据
      }).then(res => {
        console.log(res);
        this.formImgs['businessLicenceImg'] = URL.createObjectURL(file)
      })
      

忘不掉你的……结局难更改；
三人行必有我师焉；
可以看看哦
你不信吗？
真不信呀？
骗个人很难呀？
罢了罢了
其实不看也是可以的 都是重复的事情，‘你这幼稚的男孩’