多图上传异步转换同步-图片转换ba64位数据

							**图片转换ba64位数据**
多图上传reader.onloadend异步处理ba64位事件---转换成同步处理事件-vue 组件iview图标
复制代码

<template>     
    <div class="uploadImgFile-box"><Icon type="md-cloud-upload" class="uploadImgFile-icon" />上传图片
        <input type="file" class="uploadImgFile" multiple="multiple" @change="uploadImgFile" accept="image/jpeg,image/png,image/gif" />
    </div> 
</template>
<script>
export default {  
  data() {
    return {     
      imgIndex:0,
      imgStyle:true,
      imgArr:[]
    }
  },     
  methods: { 
     loadImageAsync (filesdata) {
            return new Promise( function( resolve, reject){
              var reader = new FileReader();
              reader.readAsDataURL(filesdata); // 读出 base64 
              reader.onloadend = function(){
                resolve(reader);
              };
              reader.onerror = function () {
                reject(new Error("could not load image at ") );
              };            
          });
        },
    uploadImgFile(event){     
      const that = this;
      const eventdata = event.target.files;
            that.imgArr = [];
            that.imgIndex = 0;
            that.imageAsync(eventdata)
    },
    imageAsync(event){
      const that = this;
      const filesArray = event;
      const filesLen = filesArray.length;      
      if(that.imgIndex < filesLen ){       
        that.loadImageAsync(filesArray[that.imgIndex]).then( function (value) {
                  that.imgArr.push({
                    index : that.imgIndex,
                    url : value.result
                  })  
              that.imgIndex += 1;   
              that.imageAsync(filesArray)                          
        })
      }else{
        that.imgStyle = false;
        console.log(that.imgArr)
       // that.imageSuccessCBK(that.imgArr)
      }
    }
  }
}
</script>

<style scoped>
.uploadImgFile-box{  
  background-color: rgb(24, 144, 255);
  width: 88px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: relative;
  color: white;
  border-radius: 3px;
}
.uploadImgFile-icon{
  font-size: 16px;
  margin-right: 3px;
}
.uploadImgFile{
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 9;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>
复制代码

转载于:https://juejin.im/post/5cb04d21e51d456e5d3dac0a