扩展运算符 {... this.$store.state.userinfo} 图片上传同步参考

1. 使用 URL.createObjectURL 预览
   URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。用法用下：

objectURL = URL.createObjectURL(object);

其中，object 参数指 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
对于我们的 input[type=file] 而言， input.files[0] 可以获取到当前选中文件的 File 对象。示例代码如下：
  <input id="inputFile" type="file" accept="image/*">
  <img src="" id="previewImage" alt="图片预览">
  <script>
    const $ = document.getElementById.bind(document);
    const $inputFile = $('inputFile');
    const $previewImage = $('previewImage');
    $inputFile.addEventListener('change', function() {
   
      const file = this.files[0];
      $previewImage.src = file ? URL.createObjectURL(file) : '';
    }, this);
  </script>

常见的图片上传同步渲染

 onIptChange (e) {
   
      //  console.dir(e.target)
      if (e.target.files.length === 0) {
   
        // 没有图片
        this.avatar = ''
      } else {
   
        // 选择了一张图片   图片对象--> base64 格式的字符串
        // e.target.files[0]
        // 1. new dileReader() 文件读取器(浏览器自带的)
        const reader = new FileReader()
        // 2.读取图片对象
        reader.readAsDataURL(e.target.files[0])