需求

• vant上傳多個視頻或圖片
• 圖片和視頻都有預覽圖

最終成果

過程

• 最開始是準備通過自定義預覽樣式，通過 preview-cover 插槽可以自定義覆蓋在預覽區域上方的內容。但問題是會修改每一個上傳的圖片和視頻，都添加上播放視頻的圖片，不能實現直接預覽圖片的效果
• 最終采用自定義單個圖片預覽

<van-uploaderaccept="*"v-model="imgList":after-read="afterRead":before-read="beforeRead"preview-size='25vw'@click-preview="handleclicksc":before-delete="afterDelete":preview-full-image="false":disabled="isUploading?true:false"/><!--點擊圖片或視頻出現放大圖片或播放視頻的彈窗--><van-overlay :show="show" @click="show = false"><div class="wrapper" ><div class="img-block"><img v-if="urlType==='image'" :src="url"><video autoplay class="video" v-if="urlType==='video'" :src="url" controls></video></div> <!--給視頻添加關閉圖標--><img v-if="urlType==='video'"@click="show=false"class="video-delete"src="./close.png"/></div></van-overlay> data(){return {isUploading:false,allInfoList:[]，url：'', //彈窗展示的圖片/視頻路徑urlType：'', //彈窗展示的類型}},watch: {//監聽allInfoList，根據allInfoList動態地修改文件列表'allInfoList' () {this.imgList = []for (let item of this.allInfoList) {let data = {type: item.type,name: item.originalName,url: item.type === 'video' ? 'https://replacement.png' : 'https://' + item.fileUri}this.imgList.push(data)}}}, methods:{ //限制上傳的內容為視頻或圖片beforeRead (file) {if (!file.type.startsWith('image') && !file.type.startsWith('video')) {this.$toast('請上傳圖片或視頻')return false}return true},afterRead (file) {file.status = 'uploading'file.message = '上傳中...'//添加上傳狀態，避免用戶在上傳未完成時點擊提交按鈕this.isUploading = truefileApi.uploadFile(file.file).then(res => {if (res.data.status === 'success') {let fileDTO = response.data.fileDTO//為返回的數據添加文件類型，后面依據此來判斷if (file.file.type.startsWith('video')) {fileDTO.type = 'video'}if (file.file.type.startsWith('image')) {fileDTO.type = 'image'}//將返回的所有數據都保存起來（文件地址，文件名等）this.allInfoList.push(fileDTO)} else {//上傳失敗要清空數組，不然失敗的文件依舊會展示this.handleDelete(file.file.name)}file.status = ''file.message = ''this.isUploading = false}).catch((error) => {console.log(error)this.handleDelete(file.file.name)file.status = ''file.message = ''this.isUploading = false})},//根據文件名來查找到文件列表中要刪除的文件handleDelete (name) {this.imgList.forEach((item, index) => {if (item.file.name === name) {this.imgList.splice(index, 1)}})},//手動點擊刪除，修改包含所有信息的文件列表，通過watch根據該列表動態修改圖片文件列表afterDelete (file) {let name = file.namethis.allInfoList.forEach((item, index) => {if (item.originalName === name) {this.allInfoList.splice(index, 1)}})return true},}//取消掉組件自帶的點擊預覽功能，自己添加（系統自帶預覽點擊視頻時會先視頻的播放圖片）handleclicksc (file) {let name = file.namefor (let item of this.allInfoList) {if (item.type === 'video' && item.originalName === name) {this.url = this.getUrl(item.fileUri)this.urlType = 'video'this.show = true}if (item.type === 'image' && item.originalName === name) {this.url = this.getUrl(item.fileUri)this.urlType = 'image'this.show = true}}}, .wrapper {display: flex;align-items: center;justify-content: center;height: 100%;}.img-block {position: relative;img{z-index: 99;max-width: 100%;height: auto;object-fit: cover;}video{width: 100%;max-height: 100vh;}}.video-delete{width: 45px;position: absolute;top: 60px;left: calc(100vw - 60px);}

總結

以上是生活随笔為你收集整理的Vant上传多个图片或视频，更改视频预览图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。