利用FileReader读取element-ui中上传组件el-upload上传的文件，实现先本地预览后上传至服务器（Vue）

  用elment-ui的上传组件上传用户头像时发现它的图片预览是需要先将图片发送到服务器，返回一个图片地址，然后根据这个地址在头像区显示，但是我想要的是：
选取头像，后立即在头像区显示，（不涉及图片剪辑和图片区域选取），而不是先上传到服务器。那么就需要获取一个图片在本地的地址。

• 浏览器出于安全考虑不让直接获取本地图片的路径，那我们就使用FileReader ( 或window.URL )去读取选择好的图片，返回一个DataURL，然后根据这个URL显示图片。

• 那么在el-upload组件中如何获取到选好的图片文件呢？el-upload组件的input标签是包在里面的,你只能在源码里看到它的input标签，首先我想到的是去源码里给input标签加个id,根据id找到这个元素,然后获取file,后来发现根本行不通，我无法通过id获取到这个元素，那么该怎么办呢？
  

• 经过多次尝试后发现，关闭自动上传属性后再去选取图片唯一能触发的钩子函数是on-change，注意：before-upload需要提交文件后才能触发，但是是在上传之前。on-change绑定的函数会有一个输入型参数，也就是event，但是这个event里面没有target属性，那该如何是好！我怎么获取input元素，不要着急，你会发现里面还有一个raw属性（后来发现file参数中也有raw属性），它就是你要的选取的文件数据! 根本不需要用document.getElementById("file").files[0];

    <el-upload
      class="avatar-uploader"
      ref="upload"
      :auto-upload="false"
      :multiple="false"
      :action="$http.defaults.baseURL + '/iconupload'"
      :show-file-list="false"
      :on-change="imgSaveToUrl"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="model.icon" :src="model.icon" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  

• 上代码：

    <template>
        <el-upload
          class="avatar-uploader"
          ref="upload"
          :auto-upload="false"
          :multiple="false"
          action="/iconupload"
          :show-file-list="false"
          :on-change="imgSaveToUrl"        // 选取完后 上传成功/失败后触发
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="model.icon" :src="model.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </template>
  
    <script>
        export default {
  
            data(){
                return{
                    localFile:{}
                }
            },
            methods:{
                    
                    // 选取图片后自动回调，里面可以获取到文件
                    imgSaveToUrl(event或file){  // 也可以用file
                      this.localFile=event.raw  // 或者 this.localFile=file.raw
  
                      // 转换操作可以不放到这个函数里面，
                      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
                      let reader = new FileReader()
                      reader.readAsDataURL(this.localFile);// 这里也可以直接写参数event.raw
                        
                      // 转换成功后的操作，reader.result即为转换后的DataURL ，
                      // 它不需要自己定义，你可以console.log(reader.result)看一下
                      reader.onload=()=>{
                          console.log(reader.result)
                      }
  
                      /* 另外一种本地预览方法 */
                      let URL = window.URL || window.webkitURL;
                      this.model.icon = URL.createObjectURL(file.raw);    
                      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
                    },
            }
        }
    </script>
  

• 通过上面代码你可以获取到本地的图片DataURL，将它绑到图片src上便可显示。
  
  点击保存前先通过本地DataURL显示图片，点击保存后就上传文件，返回一个服务器上的图片地址，然后通过服务器上的地址显示。