利用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顯示圖片，點擊保存后就上傳文件，返回一個服務器上的圖片地址，然后通過服務器上的地址顯示。