1.base64编码文件:

//了解原理
		let reader = new FileReader()
			reader.readAsDataURL(f.files[0])  //把目标文件转地址，文件来自于上传组件。
			....读取中
			reader.onload = function () {//文件读取成功时触发
			  myimg.src=reader.result
			}

1.FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
abort: 中断读取
2.FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

2.async搭配await和Promise的简单比较

async搭配await是ES7提出的，它的实现是基于Promise。这里使用它对比Promise的用法，这里只是简单的适合日常业务的使用场景。async、await是ES7中的提案，通过同步方式的写法，使得代码更容易阅读。

需要注意的要点:

注意：await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个Promise对象，等到异步操作完成，再去执行后面的语句。如果 await 后面的异步操作出错，那么等同于 async 函数返回的 Promise 对象被 reject！

Promise是ES6的新特性，用于处理异步操作逻辑，用过给Promise添加then和catch函数，处理成功和失败的情况

总结:async和await的写法，主要是阅读代码的时候更加语义化，看着舒服。而且看到一些权威文章上也推荐async 、await 去处理异步情况，（原画：async函数可以说是目前异步操作最好的解决方案）

async和await的写法:

api中书写:
//自定义函数:nextName()
//isNew参数 新增或覆盖
//customerIds参数 客户id
//file参数 base64编码文件

async nextName(isNew,customerIds,file) {
    let getBase64 = ()=>{
      return new Promise(resolve => {//resolve成功
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (ev) => { //文件读取成功完成时触发
          var dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
          file = dataURL;
          resolve('resolved');
        }
      });
    }
    await getBase64();
    //api/后台接口地址
    return Request().post('/api/....', {
      header: {
        contentType: 'application/json'
      },
      data: {
        isNew:isNew,
        customerIds:customerIds,
        file:file,
      }
    });
  },

//ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
//:result="result"动态获取
//页面中书写:
<ImportResult :result="result" ref="importResult"></ImportResult>

//页面书写:
data() {
return{
result: {},//这是个对象
}
}

页面调用api
import Information from '@/api/information.js';
 //methods：{中调用这个方法}
 //Information自定义的api名字 也可以书写其它名字（调用和书写必须一致）
   Information.nextName(this.isNew, this.customerIds, this.file)
        .then(res => {//成功
          console.log(res,'这个数据导入信息是');
          //this.result = res.data传递一个对象 子组件可以接收到这个对象的所有内容
          this.result = res.data;
          //组件中子组件传递的参数importResult （参考上面组件）   
          //switchDialog(true):是子组件的方法(参考如上组件:可以使用组件的所有方法)
          this.$refs.importResult.switchDialog(true);
        })
        .catch(err => {//失败
          console.log(err);
        })
        .finally(() => {//关闭加载
          this.$store.set('app/loadingVisible', false);
        });
    }