title: How to preview files before uploaded to server by using file-upload component of vue.js & element-ui?
body: <p>I'm using vue.js &amp; element-ui to upload files and preview files. I want to preview file(.pdf/.docx/.jpg...) before uploaded to server.</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;el-upload
            ref="uploadFile"
            :on-change="onUploadChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :http-request="handleUpload"
            :data="extendData"
            :auto-upload="false"
            class="upload-demo"
            drag
            action="uploadUrl"
            multiple&gt;
            &lt;i class="el-icon-upload"/&gt;
            &lt;div class="el-upload__text"&gt;drag here, or &lt;em&gt;click to upload&lt;/em&gt;&lt;/div&gt;
   &lt;/el-upload&gt;
  </code></pre>
  
  <p>Only the on-change function can get the content of the file, while the on-preview function only get the meta message. How to get the file content and preview that before which is uploaded to server?</p>