[JavaScript知识库]vue+element-ui+axios实现上传图片进度条效果

要下班了，写点啥

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

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

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

<div class="upload" @mouseover="mouseOver" @mouseleave="mouseLeave">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :data="{type:'COMP_BUSI_UNI'}"
                    :http-request="handleUploadFile"
                    :before-upload="(file,limitNum)=>beforeAvatarUpload(file,5)"
                    :show-file-list="false"
                    :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList,'businessLicenceImg')"
                    >
                    <img v-if="formImgs.businessLicenceImg" :src="formImgs.businessLicenceImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <!-- <el-input type="hidden" v-model="form.businessLicenceImg" class="hidden-input"></el-input> -->
                  <span v-if="formImgs.businessLicenceImg && imgDelete" class="upload-delete" @click="handleRemove('businessLicenceImg')">
                    <i class="iconfont icon-shanchu"></i>
                  </span>
                  {{jdt}}
                </div>

• 请求方法

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)
      })
      

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