element-plus：Upload多图上传预览

最新推荐文章于 2024-03-27 15:19:47 发布

lynachen

最新推荐文章于 2024-03-27 15:19:47 发布

阅读量4.1k

点赞数 1

分类专栏： vue3 element-plus 文章标签： vue.js elementui javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Julylyna/article/details/128544373

版权

vue3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

element-plus

3 篇文章 0 订阅

订阅专栏

一、在处理上传图片时，需注意以下几个API：

1.获取回显图片：file-list（数组格式）

2. 限制文件数量：limit

3.超出文件限制个数时，可以用on-exceed弹出提示，或者获取上传数量之后用css控制上传按钮是否显示

二、预览图片有两种方式：

1.Upload组件里的预览：

2.Image图片预览：

需注意的是：Upload组件里的预览类型为string，Image图片预览为数组

代码及效果图如下：

<template>
	<div class="app-container">
		<div class="app-body">
			<el-form ref="formRef" :rules="rules" :model="dataForm" label-position="right" label-width="150px">
				<el-form-item label="上传图片" prop="images">
					<el-upload 
					    ref="uploadRef"
					    :class="{ 'disabled': dataForm.fileList.length > 4 }"
						action="#" 
						:limit="5"
						:show-file-list="true"
						list-type="picture-card" 
						:on-preview="handlePreview"
					    :on-remove="handleRemove"
					    :on-change="handleChange"
					    :on-exceed="handleExceed"
					    :file-list="dataForm.fileList"
					    :auto-upload="false"
					    accept=".jpg,.jpeg,.png,.bmp"
					>
					  	<template #default>
						    <el-icon><Plus /></el-icon>
						</template>
					</el-upload> 
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleClick('save')" round>提交</el-button>
					<el-button @click="handleClick('reset')" round>重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="dialog-body">
			<!--Upload图片预览 弹出层start-->
			<el-dialog v-model="imageVisible">
				<img w-full :src="imageUrl" alt="Preview Image" />
			</el-dialog>
			<!--Upload图片预览 弹出层end-->
			
			<!--Image图片预览 弹出层start-->
			<el-image-viewer @close="imageClose" :url-list="imageList" v-if="imageVisible"/>
			<!--Image图片预览 弹出层end-->
		</div>	
	</div>
</template>