解决图片上传 显示图片慢的问题

问题描述：点击上传图片到服务器，接口回调成功，预览图片时加载慢

原因：从服务器上下图片跟网络有关

解决问题：上传图片成功预览本地图片

//上传文件接口
    uploadPic(event, num) {
      var that =  this;
      var imgSrc =null;
      var setImgSrcHandle =null;
      var fileObj = event.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(fileObj);
      reader.onload = function (e) { 
        imgSrc =  e.currentTarget.result
        if(typeof setImgSrcHandle =="function"){
          setImgSrcHandle();
          setImgSrcHandle = null;
        }
      }
      if (fileObj.size / 1024 / 1024 > 5) {
        utils.toast("上传图片大于5M", 2000);
        return;
      }
      if (!/\.(jpg|jpeg|JPG)$/.test(event.target.value)) {
        utils.toast("图片类型必须是jpeg,jpg中的一种", 2000);
        return;
      }
      api.upLoadImg(fileObj).then(res => {
        this.$message({
          message: res.data.message,
          type: res.data.code==0?"success":"warning"
        });
        if (res.data.code == 0) {
          this.imgSverUrl = res.data.data.base + res.data.data.urls[0];
          if(imgSrc){
             this.$set(this.childrenData, "brandLogo",imgSrc);
          }else{
            setImgSrcHandle =  ()=> {
              that.$set(that.childrenData, "brandLogo",imgSrc);
            }
          }
        }else {
           this.childrenData.brandLogo = '';
        }
      });
    },

 

 

解释：

将文件转成Base64编码字符串

var reader = new FileReader();

reader.readAsDataURL(fileObj);

reader.onload = function (e) {

      imgSrc = e.currentTarget.result

}

这个过程是异步的，由于上传文件到服务器的方法也是异步的，故不能确定是谁先拿到URL，并且即使从服务器上拿到URL，再下载下来也是需要时间的。

所以声明了一个setImgSrcHandle变量，初始值是null

接下来就是看文件传到服务器的时间和onload两个异步哪个快，如果是onload快得话直接赋值给imgSRC，如果是前者快得话，调setImgSrcHandle函数