沒有用插件。最后的呈現(xiàn)是點擊彭则，將內(nèi)容打開一個新頁。
總體思路大概是占遥，視頻放video標(biāo)簽里贰剥，pdf放iframe里。
說完了哈哈哈哈哈哈哈哈哈哈
這次的需求是上傳一個文件筷频，限制文件為mp4和pdf蚌成，大小不超過500M。
上傳文件是放在新增和修改的彈出框內(nèi)凛捏，所以需要和新增修改一起完成担忧。
emmm我的意思是，點擊“上傳文件”時坯癣，不調(diào)取接口瓶盛，先完成本地文件的預(yù)覽。等到確定新增和修改時示罗，一起惩猫。
總體思路大概是，在上傳的按鈕下有一個容器蚜点，用v-if控制顯隱轧房；
里面還有倆容器，上傳文件為視頻時video绍绘，為pdf時為iframe奶镶。
空狀態(tài)
視頻
pdf
代碼說明： elementui自帶的action我不會用。陪拘。每次都是給個占位符厂镇，最后使用http-request。accept為限制文件格式左刽。show-file-list為顯隱文件列表捺信。。這個我也沒用過欠痴。迄靠。我覺得它不好看哈哈哈哈哈哈哈哈哈哈
寫的過程中發(fā)現(xiàn)iframe無法添加點擊事件，我去百度斋否。梨水。就。茵臭。emmm.....很麻煩疫诽。。為了省事我加了一個容器旦委，設(shè)置定位到iframe一樣的位置奇徒，相當(dāng)于我們看到的還是iframe爸特點擊到的其實是那個隱形的容器~~
上代碼 ??
<el-upload
class="upload-demo"
action="#"
:http-request="handleUpload"
accept=".pdf, .mp4"
:show-file-list="false"
>
<el-button size="mini" type="primary">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">
只能上傳mp4/pdf文件，且不超過500k
</div>
</el-upload>
<div class="preview-container" v-if="preview" @click="handlePlay">
<video
v-if="fileType === 'mp4'"
alt="視頻預(yù)覽"
width="100px"
height="100px"
:src="articleUrl"
/>
<div class="pdf-container">
<iframe
v-if="fileType === 'pdf'"
:src="articleUrl"
frameborder="0"
></iframe>
<!-- 隱形的容器~~ -->
<div class="frame-wrap"></div>
</div>
</div>
style ↓ 樣式不對尼萌就自己再調(diào)調(diào)昂主要是看frame-wrap的~
.preview-container {
margin-top: 20px;
width: 100px;
height: 100px;
}
.pdf-container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.frame-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
script標(biāo)簽內(nèi)的methods ↓ (endsWith('文件類型')是昨天才學(xué)到的一個獲取文件類型的方法缨硝，會有一個boolean返回值)
// 上傳方法
handleUpload(file) {
if (file.file.size > 512000) {
this.$message("文件最大500K");
return;
}
this.file = file.file;
// 兩種顯示的路徑都設(shè)置成articleUrl摩钙。至此完成預(yù)覽
this.articleUrl = URL.createObjectURL(this.file);
// let type = file.file.name.substr(-3);
// ↑這句是知道endsWith之前獲取文件類型的愚蠢方式哈哈哈哈哈哈
// 頁面中用fileType來判斷容器的顯隱
file.file.name.endsWith("mp4")
? (this.fileType = "mp4")
: (this.fileType = "pdf");
this.preview = true;
},
// 打開新頁呈現(xiàn)文件預(yù)覽
handlePlay() {
window.open(this.articleUrl, "_blank");
},
