如何建设网站?,封开网站建设公司,网站权重批量查询,网站 云端结合element plus的el-upload标签#xff0c;实现上传图片和视频#xff0c;并支持在线预览和放大 1、html部分
el-form-item label活动照片、视频el-uploadv-model:file-liststate.photoList:actionstate.uploadUrlaccept…结合element plus的el-upload标签实现上传图片和视频并支持在线预览和放大 1、html部分
el-form-item label活动照片、视频el-uploadv-model:file-liststate.photoList:actionstate.uploadUrlaccept.jpg,.png,.jpeg,.mp4,.mov,.avilist-typepicture-card:limit10:on-successhandleUpload:classstate.photoList.length 10 ? hideUpload : el-iconPlus //el-icontemplate #file{ file }divimgv-iffile.name.indexOf(.jpg) -1|| file.name.indexOf(.png) -1|| file.name.indexOf(.jpeg) -1:srcfile.urlaltclassel-upload-list__item-thumbnail /videov-else-iffile.name.indexOf(.mp4) -1|| file.name.indexOf(.mov) -1|| file.name.indexOf(.avi) -1classel-upload-list__item-thumbnailstylewidth: 100%;height: 100%;autoplay:srcfile.urlsource :srcfile.url typevideo/mp4 /source :srcfile.url typevideo/mov /source :srcfile.url typevideo/avi //videospan classel-upload-list__item-actionsspan classel-upload-list__item-preview clickhandlePreview(file)el-iconzoom-in //el-icon/spanspanv-if!state.disabledBtnclassel-upload-list__item-deleteclickhandleRemove(file)el-iconDelete //el-icon/span/span/div/template/el-uploadel-dialog v-modelstate.dialogVisibleimgw-full:srcstate.dialogImageFile.urlaltv-ifstate.dialogImageFile.name.indexOf(.jpg) -1|| state.dialogImageFile.name.indexOf(.png) -1|| state.dialogImageFile.name.indexOf(.jpeg) -1 /videov-else-ifstate.dialogImageFile.name.indexOf(.mp4) -1|| state.dialogImageFile.name.indexOf(.mov) -1|| state.dialogImageFile.name.indexOf(.avi) -1w-fullstylewidth: 100%;height: 100%;controlsautoplay:srcstate.dialogImageFile.urlsource :srcstate.dialogImageFile.url typevideo/mp4 /source :srcstate.dialogImageFile.url typevideo/mov /source :srcstate.dialogImageFile.url typevideo/avi //video/el-dialog
/el-form-item2、js部分
const state reactive({photoList: [] as any, // 上传图片dialogVisible: false as boolean,dialogImageFile: as any,disabledBtn: false as boolean,
});// 预览图片和视频
const handlePreview (file: any) {state.dialogImageFile file;state.dialogVisible true;
}
// 删除图片视频
const handleRemove (file: any) {state.photoList.map((item: any, index: number) {if(item.response item.response.data) {if(item.response.data file.response?.data || item.response.data file.url) {state.photoList.splice(index, 1);}} else if(item.url) {if(item.url file.response?.data || item.url file.url) {state.photoList.splice(index, 1);}}})
}
// 上传图片
const handleUpload (res: any) {if(res.code ! 0) {state.photoList.pop()ElMessage.error(res.msg)}
}3、css部分
style langscss scoped:deep(.hideUpload .el-upload--picture-card) {display: none;}:deep(.el-upload--picture-card) {width: 243px;height: 180px;}:deep(.el-upload-list--picture-card .el-upload-list__item) {width: 243px;height: 180px;}
/style
