title: Vue + Element UI with preview PDF before upload file
body: <p>I am using Vue and element UI to achieve the upload file function, also use pdfvuer node module.
  In this case, the files will upload to Amazon S3 finally.</p>
  <p>I want to preview the file before the user click confirms button.
  ref picture: <a href="https://i.stack.imgur.com/RJNWc.png" rel="nofollow noreferrer">upload</a></p>
  <p>Currently, I used the blob and createObjectUrl method to realize preview PNG and JPG type files. but not work with PDF type
  ref picture: <a href="https://i.stack.imgur.com/E66tn.png" rel="nofollow noreferrer">upload and preview png</a></p>
  <p>Here is my code with upload of dialog:</p>
  <p><strong>HTML :</strong></p>
  <pre><code>      &lt;span class=&quot;pt-0&quot;&gt;
          &lt;p class=&quot;text-center mt-0&quot;&gt;Please selecct file which you want to import&lt;/p&gt;
          &lt;el-upload
            accept=&quot;image/png, image/jpeg, application/pdf&quot;
            class=&quot;avatar-uploader&quot;
            :show-file-list=&quot;true&quot;
            :before-upload=&quot;beforeAvatarUpload&quot;
            action=&quot;&quot;
          &gt;
            &lt;i class=&quot;fas fa-cloud-upload-alt fa-2x my-8&quot; v-if=&quot;objectURL == ''&quot;&gt;&lt;/i&gt;
  
  
            &lt;img :src=&quot;objectURL&quot; width=&quot;100%&quot; /&gt;
            &lt;pdf :src=&quot;imageUrl.webkitRelativePath&quot; /&gt;
  
  
            &lt;div class=&quot;el-upload__text&quot; v-if=&quot;objectURL == ''&quot;&gt;Click here to execute&lt;/div&gt;
            &lt;div class=&quot;el-upload__tip&quot; slot=&quot;tip&quot;&gt;
              You can just upload PDF/PNG/JPG file only
            &lt;/div&gt;
          &lt;/el-upload&gt;
        &lt;/span&gt;
        &lt;span slot=&quot;footer&quot; class=&quot;dialog-footer&quot;&gt;
          &lt;el-button @click=&quot;innerDialogUploadFile = false&quot;&gt;Cancel&lt;/el-button&gt;
          &lt;el-button type=&quot;danger&quot; @click=&quot;handleUploadFile&quot;&gt;Confirm&lt;/el-button&gt;
        &lt;/span&gt;
      &lt;/el-dialog&gt;
  </code></pre>
  <p><strong>JS :</strong></p>
  <pre><code>data(){ retrun ... }
  methods:{
     beforeAvatarUpload(file) {
        this.objectURL = window.URL.createObjectURL(new Blob([file]));
        this.imageUrl = window.URL.createObjectURL(new Blob([file]));
        const isJPG = file.type === &quot;image/jpeg&quot;;
        const isPNG = file.type === &quot;image/png&quot;;
        const isPDF = file.type === &quot;application/pdf&quot;;
        const isLt2M = file.size / 1024 / 1024 &lt; 20;
        switch (file.type) {
          case &quot;image/png&quot;:
            this.fileType = 1;
            break;
          case &quot;image/jpeg&quot;:
            this.fileType = 2;
            break;
          case &quot;application/pdf&quot;:
            this.fileType = 3;
            break;
          default:
            break;
        }
        return isJPG &amp;&amp; isPNG &amp;&amp; isPDF &amp;&amp; isLt2M;
      },
  }
  </code></pre>
  <p>Can someone help me to resolve this issue?
  Either offer me another way to re-write code.</p>
  <p>If it needs more detailed information on my code, please let me know.</p>