结合el-upload修改支持上传图片、视频并预览

结合element plus的el-upload标签,实现上传图片和视频,并支持在线预览和放大
1、html部分


	
		
		
	
	
		
		
	

2、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部分


你可能感兴趣的:(HTML/CSS,前端)