javascript - 上传文件前带有预览 PDF 的 Vue + Element UI
问题描述
我正在使用Vue和element UI来实现上传文件功能,也使用pdfvuer节点模块。在这种情况下,文件最终会上传到 Amazon S3。
我想在用户单击确认按钮之前预览文件。参考图片:上传
目前,我使用blob和createObjectUrl方法来实现预览PNG和JPG类型的文件。但不适用于 PDF 类型的参考图片:上传和预览 png
这是我上传对话框的代码:
HTML:
<span class="pt-0">
<p class="text-center mt-0">Please selecct file which you want to import</p>
<el-upload
accept="image/png, image/jpeg, application/pdf"
class="avatar-uploader"
:show-file-list="true"
:before-upload="beforeAvatarUpload"
action=""
>
<i class="fas fa-cloud-upload-alt fa-2x my-8" v-if="objectURL == ''"></i>
<img :src="objectURL" width="100%" />
<pdf :src="imageUrl.webkitRelativePath" />
<div class="el-upload__text" v-if="objectURL == ''">Click here to execute</div>
<div class="el-upload__tip" slot="tip">
You can just upload PDF/PNG/JPG file only
</div>
</el-upload>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="innerDialogUploadFile = false">Cancel</el-button>
<el-button type="danger" @click="handleUploadFile">Confirm</el-button>
</span>
</el-dialog>
JS:
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 === "image/jpeg";
const isPNG = file.type === "image/png";
const isPDF = file.type === "application/pdf";
const isLt2M = file.size / 1024 / 1024 < 20;
switch (file.type) {
case "image/png":
this.fileType = 1;
break;
case "image/jpeg":
this.fileType = 2;
break;
case "application/pdf":
this.fileType = 3;
break;
default:
break;
}
return isJPG && isPNG && isPDF && isLt2M;
},
}
有人可以帮我解决这个问题吗?要么给我另一种重写代码的方法。
如果需要有关我的代码的更多详细信息,请告诉我。
解决方案
更新。我终于找到了我的问题的解决方案。我只是使用<embed>
标签来达到预览功能。
这是我的代码:
<input @change="handleChange" />
// preview area
<embed
v-if="embedSrc"
type="video/webm"
:src="embedSrc"
width="100%"
style="max-height: 50rem; min-height: 20rem"
/>
...
data:{
return {
embedSrc: ''
}
}
...
methods:{
handleChange(){
this.embedSrc = URL.createObjectURL(event.target.files[0]);
}
}
请注意,:
在 src 之前添加,否则无法正确获取动态 src。
推荐阅读
- abap - 根据最新记录过滤掉z表内的记录
- postgresql - 默认 Postgres 为 14,数据库文件为 v12
- html - 使用 npm 时,字体真棒图标未在 netlify 上加载
- url - Sitemap.xml、Google Search Console 中的 URL 无效
- java - 重新启动客户端节点时,Ignite Cluster 变得无响应
- flutter - 主体可能正常完成,导致返回 null,但返回类型可能是不可为空的类型
- reactjs - 阻止 StaticQuery 在未登录时公开数据
- sql - 使用 SQL 连接 Apache Superset 中的 3 个或更多表
- java - 是否可以在不允许修改的情况下提供对 ArrayList 的引用?
- amazon-redshift - 有没有办法在邮件的正文/标题中将 Quicksight 电子邮件报告更新到今天的日期?